webpack-bundle-analyzer + Vue
1 安装 webpack-bundle-analyzer
npm install –-save-dev webpack-bundle-analyzer
2 配置 packagen.json
"scripts":{
"analyze": "npm_config_report=true vue-cli-service build --mode analyze"
}
3 创建环境变量
.env.analyze
NODE_ENV='production'
ANALYZ_ENV=true
4 webpack 设置插件
vue.config.js:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
if (process.env.ANALYZ_ENV) {
config.plugins.push(new BundleAnalyzerPlugin());
}
}
}
3 开始分析
npm run analyze
会自动启动页面 http://127.0.0.1:8888/
image.png
参考：
https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7