前端打包优化
如何查看打包后的文件
正常往往的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