性能优化

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

    使用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部署，每个界面如下:

1
2
3
4
<script src='abc.js'></script>
<script>
	__loadjs('list')
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
(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里面，无法做缓存。

1
2
3
4
5
<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

    异曲同工之妙啊！

分享
返回顶部