javascript - js打包拆分规范讨论（请点进来看一下，标题较短）

Question

声明：

1.这里想讨论的是拆分规则，不是在问哪个工具怎么使用。
2.这里没有在想找正确答案，因为感觉这个问题要结合具体业务场景。

随着项目开发越来越大，一开始代码全打包到一个文件的方式，让文件越来越大，接下来要做拆分，可具体的拆分规则又不是很熟悉，或者说，我没有一个很好的方案，所以想到这是一个值得讨论的话题，想提问的形式拿出来，请各位大神有这方面接触的分享一下自己的经验。

这个问题有一定局限性，因为不同的业务场景，可能拆分方式还有不同，所以，可否想讨论的朋友能把具体的业务场景细说一下，再结合具体业务场景给出解决方案。

Answer 1

最简单的话，先开始第一步，把通用的组件库，例如react,jquery,fetch 这种库打包到一个 vendor 文件夹中，把这一部分打包之后，之前页面上的一个大文件，肯定就可以拆成两个了。通常情况下来看，这个vendor文件的体积要远大于页面上业务代码的体积，这一部分如果缓存住的话，页面加载速度和本地编译速度已经可以提高很多了。

至于更长久性的维护vendor，我的建议是自己写一个 task ,可以扫描当前项目下所有文件间的依赖关系，定期把那些被依赖最多的模块打包到 vendor 中。

至于更具体的拆分，如果不限编译慢的话，webpack 有插件可以提取通用模块。