vue-cli2和vue-cli3打包分析案例: 以element-admin和iview-admin为例.
在vue-cli3中的配置
1、安装
npm install webpack-bundle-analyzer --save-dev
2、 fig.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: config => {
if (v.NODE_ENV === 'production') {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
}
3、 package.json
"analyz": "npm_config_report=true npm run build" // 打包命令，根据实际灵活修改
4、 npm run analyz    //默认8888  端⼝
5、浏览器打开localhost:8888
在vue-cli2中的配置
安装插件
npm install webpack-bundle-analyzer --save-dev
在build/fig.js引⼊配置
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
vue element admin}
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8889,
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'
}),
]
运⾏
npm run build // 正常的打包命令
浏览器打开
localhost:8889
element-admin的分析图
iview-admin的分析图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。