webpack-bundle-analyzer可视化分析工具

那我们如果想使用 webpack-bundle-analyzer可视化分析工具来查看文件信息

image.png

安装

npm install webpack-bundle-analyzer -D

vue-cli3中配置

在vue.config.js

module.exports = {
    chainWebpack: config => {
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

    },
}

运行代码就会出现： npm run dev

vue-cli2中配置

vue-cli2构建的项目中已经集成了该功能，位置在 build\webpack.prod.conf.js

image.png

直接使用npm run build --report就会出现

注意：在jenkins打包时把该配置去掉，否则打包不成功