从 Vue 打包文件看项目 JS 引用

Question

使用 vue-cli 开发 vue web app，首先考虑的是线上环境的打包部署，一开始以为无论多少个界面，只会打出一个超级大的JS，首次请求的时候巨慢无比。

    后来发现我错了，Vue 可以借助 webpack，N 个界面，可以打出对应的 N 个 JS，按需加载。

这个好，符合我的性能观点，按需加载。

运行 npm run build 进行打包，会打出 N+3 个 JS 文件，如下图：

上图的0-2，是指我这个项目，共有3个路由界面，对应的 3 个业务 js

• app.js，是我们项目的公用JS代码，入口就是 main.js，这个公用代码，就是指除了在 node_moudles 公用包之外的公用代码。

打出的另外两个JS，分别是 vendor.js、manifest.js

• vendor.js 是从 node_modules 包中提取的公用的JS代码库，与 app.js 不同，这个里面无业务JS。
• manifest.js 是个索引文件，不同的界面，通过 manifest.js 文件，调用上面 0-2 的业务JS。

这个跟我们之前的生产环境 JS 部署很类似

乐视网最早之前的JS部署，每个界面如下:

<script src='abc.js'></script><script>__loadjs('list')</script>

abc.js，是一个索引文件，代码如下：

(function(window){
var ver = {
"list":"04_js/2017**/15/17/14"
"index":"01_js/2017**/15/17/14"
……
};
//读取入口文件
window.__loadjs = function(js){
document.write('<script type="text/javascript" src="//js.letvcdn.com/lc'+(ver[js]||local)+'.js"></script>');
};
})(window);

__loadjs 根据传入的字符串，同步加载 cdn 上的 JS。

后来我觉得这个的话，每个界面的 JS 都不一致，像 jquery 那种大而且公用的代码，都被打到不同的JS里面，无法做缓存。

<script src='header.js'></script>
<script src='abc.js'></script>
<script>__loadjs('list')</script>

如上是我改进后的，多了一个 header.js，里面存了一些公用的JS，包括 jquery、ajax url 配置、常用工具类等JS，__loadjs，只加载自己界面的业务 JS。

这样的好处，是将一个比较大的 header.js，在请求完一次，都 304 缓存起来，减少了请求

由此看来，

• abc.js = manifest.js
• header.js = vendor.js+app.js

异曲同工之妙啊！