前端打包性能优化

如何查看打包后的文件

正常往往的npm run build 就可以，但是一般项目中会使用eleemnt-ui呀或是echarts等等，打出的包会非常大，因此需要优化。
Step1:
package.json文件中添加script:
需要先安装：npm install --save-dev webpack-bundle-analyzer 然后配置插件；

"pack": "npm_config_report=true node --max_old_space_size=409600 build/build.js"

Step2: npm run pack

然后就可以看见打包完的vendor.js 和 app.js 大小；

优化方案

1、使用GZip格式打包资源文件；
2、拆分vendor.js & app.js，首屏只只加载当前需要使用的资源；
3、将各个项目中共用的npm依赖包打包成单独的docker，各项目通过类似CDN的方式引用同一地址，充分利用缓存；
4、公用组件中图标文件使用iconfont代替svg；

使用GZIP压缩资源文件

将打包后的文件设置为gzip压缩文件格式，浏览器下载gzip文件后解析成js运行

安装压缩插件

npm inst