vue-cli3.x 配置打包可视化插件webpack-bundle-analyzer

介绍

可以在代码运行或者打包的时候，清晰的用图展示出打包情况：

• bundle 的具体打包了什么
• 展示包以及文件的打包前、后、Gzip体积
• 找到哪些模块导致了bundle的体积过大（包的体积越大占据图示方块的面积越大）
• 进行优化

安装：

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

vue.config.js配置：

//打包和运行都执行
module.exports = defineConfig({
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
})


//只是打包访问report.html
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = defineConfig({
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin({
                analyzerMode: 'static', //可选值有server static disabled
                generateStatsFile: false,
                statsOptions: { source: false },
                openAnalyzer: false
            })
        ]
    }
})

运行打包命令：

npm run build

访问：http://127.0.0.1:8888/，即可看到打包后的展示图