使用 analyzer 分析项目编译后的文件组成,以便进行加载速度优化。
1.安装依赖
npm install webpack-bundle-analyzer --save-dev
2.在 vue.config.js
中添加如下配置
module.exports = { chainWebpack: config => { if (process.env.use_analyzer) { // 添加分析工具 config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } } }
3.修改package.json
"scripts": { "analyzer": "use_analyzer=true npm run dev" }
4.执行
npm run analyzer
运行成功,打开127.0.0.1就可以看到包的情况。