- 可以帮助我们分析 webpack 在打包过程中有哪些可以改进的地方
安装在开发环境中
npm install --save-dev webpack-bundle-analyzer
- npm 地址: webpack-bundle-analyzer - npm
- 可以在 npm 地址中查看 BundleAnalyzerPlugin 各项参数配置
根目录新建 vue.config.js 文件
- 配置如下
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
运行
在我们运行 npm run serve 时,会自动打开 http://127.0.0.1:8888/,在这个页面上,我们可以根据项目实际情况,对打包过程进行进一步的分析和优化