当一个项目开发完成的时候,需要提交到生产环境,但是提交之前我们得想一想,这个项目打包之后是不是体积挺大的?打包的结果依赖包都分别占了多大的体积?如何去分析更好的指导我们去优化?此篇博客针对的是vue框架
用到了一个插件,叫作webpack-bundle-analyzer,官网地址:https://github.com/webpack-contrib/webpack-bundle-analyzer
安装方式:
npm install --save-dev webpack-bundle-analyzer
在vue.config.js下进行配置:添加如下代码
chainWebpack: config => {
if(process.env.analyzer)
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
在package.json中加上这句话:
"analyzer": "set analyzer=true && vue-cli-service build "
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"analyzer": "set analyzer=true && vue-cli-service build "
},
启动命令:
npm run analyzer
分析界面如下图所示:
打包生成的map文件是不会在这里边进行显示的,下图是我电脑中生成的所有文件,可以看到,map文件没有显示
该如何看这个分析图:
总结一下,通过这个分析工具,我们可以获取到的信息有:
js文件打包生成的数量,总的大小以及每个js文件的大小,有哪些东西构成。