【前言】
前面对项目打包做了优化处理，但是还不够完美，有两点可继续优化
- 生成的chunk-vendors文件过大，压缩后仍然超过1M
- 开发、测试环境生成的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被如愿以偿地拆分，并且文件后缀也加上了哈希值，完结撒花~
标签：文件,element,ui,拆包,哈希,js,打包 From： https://www.cnblogs.com/wx3091/p/17876844.html