前端优化之路：打包文件拆包、增加哈希值

 

【前言】

 

前面对项目打包做了优化处理，但是还不够完美，有两点可继续优化

　　1.  生成的chunk-vendors文件过大，压缩后仍然超过1M

　　2.  开发、测试环境生成的js文件，未带哈希值

 

问题1：如果在弱网环境下，会造成首次白屏时间过长

问题2：容易产生同名文件，造成浏览器缓存

出于以上两点考虑，故而需继续对项目优化处理，以求精益求精

 

优化前，dist里的js文件列

 

 【打包分析】

 

先来解决问题1，需要继续对chunk-vendors文件进行拆包处理

拆包之前，需要清楚项目里各个模块依赖包的大小，方便清楚哪些模块需要拆包处理，对于这点，vue-cli中有提供命令，在package.json里配置这行命令就行

 

而后，在项目终端，输入 npm run report，等待一会后，项目里会自动生成一个dist包，并且在与index.html同级有一个report.html，本地打开至浏览器就行
 
以下是生成的report.html，也就是项目的打包分析图

 

 

【依赖拆包】

 

从打包分析图可直观看出项目所有的依赖包小大，以及其归属关系

可以看出，echarts、element-ui占去了近乎50%的空间大小

 

需要对这两个大模块单独拆包

 

 
由于echarts包过大，分包后仍旧过大，考虑到将其由全局引入改为局部引入，也就是按需引入，结果意外发现，项目里根本未使用echarts，却将其挂载在vue实例上，也就是说全局引入了一个压根不用的echarts包，造成了资源浪费，故而直接将其注释

 

解决了echarts包问题，现在该element-ui了，分包后也仍然很大，这就需要再次拆包，不难发现，element-ui的lib目录有两个大文件，一个是element-ui.common.js，另一个是utils文件夹，那么就好办了。

 

首先，需要在element-ui组里加入这个属性，允许将其拆包至其他分组

再将其拆包

 

后面将lodash分包，如法炮制

 
到现在，问题1的包过大问题，顺利解决。

 

 

 

【文件哈希值】

 

问题2是由于js文件未生成哈希值

将configureWebpack对象改成函数写法，暴露其内部设置，直接赋值文件名，哈希值多少位可以自由定义，如下设置了带有4位哈希值的文件名。

 

然后，生成的js文件直接被放入了dist文件夹第一层，与index.html同层，倒也不影响项目正常运行，但是处于强迫症，还是解决了一下，直接给它添加文件路径就行,

不存在的文件夹，webpack会自动创建，这点也佩服webpack的强大

 

解决了问题1、问题2，现在来试试成果吧

 

目前最大的包，压缩后不过600k，依赖包element-ui被如愿以偿地拆分，并且文件后缀也加上了哈希值，完结撒花~