NPM：
一 安装
npm install --save-dev webpack-bundle-analyzer
二 配置
在webpack.prod.conf.js中增加以下配置：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
配置package.json 文件，默认会打开http://127.0.0.1:8888作为展示。
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
三 运行
npm run analyz
Yarn:
一 安装
yarn add -D webpack-bundle-analyze
二 配置
配置webpack.config.js文件：
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.splitChunks({
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/](vue|axios)[\\/]/,
name: 'chunk-vendors',
chunks: 'all'
}
}
})
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}
配置package.json 文件,默认会打开http://127.0.0.1:8888作为展示。
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
三 运行
yarn analyz
