当咱们需求分析打包文件dist里哪些资源能够进一步优化时，就能够运用包分析器插件webpack-bundle-analyzer。NPM上的介绍是 运用交互式可缩放树图可视化 webpack 输出文件的巨细

条件环境

  • vue 3.0.0
  • @vue/cli 4.5.15

webpack-bundle-analyzer插件的装置

$ npm install --save-dev webpack-bundle-analyzer

检查bundle分析的几种方法

1. 第一种，运转完并敞开本地服务检查

  1. 在 webpack.config.js 中找到 chainWebpack，参加以下装备，无需改动 package.json

    module.exports = {
    chainWebpack: config => {
        // 装备包分析器
        config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

  2. npm run serve 重新运转项目（运转指令具体看项目装备）

    Webpack Bundle Analyzer包分析器

  3. 浏览器会主动翻开127.0.0.1:8888（咱们手动输入localhost:8888也是能够的）

    Webpack Bundle Analyzer包分析器

这种方法快速便捷，不会生成 stats.json 文件，但是只能看到每一个文件的 Stat size，并且运转完浏览器主动翻开的不是项目自身

2. 第二种，构建完并敞开本地服务检查

  1. 在 webpack.config.js 中找到 chainWebpack，参加以下装备 
    module.exports = {
    chainWebpack: config => {
        // 装备包分析器
        config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}
  2. 在 package.json 中，找到 scripts，添加 
    "analyz": "NODE_ENV=production vue-cli-service build --mode production",
或
"analyz": "NODE_ENV=production npm run build",
  3. npm run analyz 开端构建打包
    Webpack Bundle Analyzer包分析器
    发现报错了（此刻 npm run build 却是正常且浏览器也会主动翻开127.0.0.1:8888），这是因为windows系统不能识别设置环境变量的指令，需求运用一个插件cross-env

    cross-env 是运转跨平台设置和运用环境变量的脚本，能够提供一个设置环境变量的 scripts，让你能够以 unix 方法设置环境变量，然后在 windows 上也能兼容运转** 3.1 装置 cross-env 插件

    $ npm install cross-env --save-dev
    3.2 回到 package.json 中，找到 scripts，将方才的 analyz 加上 cross-env 即可 
    "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production",
或
"analyz": "cross-env NODE_ENV=production npm run build",
    3.3 继续履行 npm run analyz，浏览器会主动翻开127.0.0.1:8888（咱们手动输入localhost:8888也是能够的）
    Webpack Bundle Analyzer包分析器
    这种方法同样也不会生成 stats.json 文件，除此之外，还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格局的文件巨细

3. 第三种，生成html文件

  1. 在 webpack.config.js 中引入BundleAnalyzerPlugin，并找到 configureWebpack，参加以下装备 
    // vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    configureWebpack: {
        plugins: [
            // 装备包分析器
            new BundleAnalyzerPlugin({
                analyzerMode: 'static',
                // analyzerMode: 'server',
                // analyzerMode: 'disabled',
                // analyzerHost: '127.0.0.1',
                // analyzerPort: 8888,
                reportFilename: 'report.html',
                defaultSizes: 'gzip',
                generateStatsFile: true, // 假如为true，则Webpack Stats JSON文件将在bundle输出目录中生成
                openAnalyzer: false, // 默许在浏览器中主动翻开陈述
                statsFilename: 'stats.json', // 假如generateStatsFile为true，将会生成Webpack Stats JSON文件的名字
                statsOptions: { source: false }
            })
        ]
    }
}
  2. 在 package.json 中，找到 scripts，添加 
    "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production",
或
"analyz": "cross-env NODE_ENV=production npm run build",
  3. npm run analyz 开端构建打包，完成后，咱们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件
    Webpack Bundle Analyzer包分析器
  4. 双击翻开 report.html 文件
    Webpack Bundle Analyzer包分析器

这种方法会生成 stats.json 文件（很大，布置时需求移除），除此之外，还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格局的文件巨细

优化

上述方法，要不主动翻开浏览器，要不就主动在dist包里生成一个很大的stats.json 文件，怎么样才能运用包分析器的一起还不影响咱们运用npm run serve与npm run build呢？ 答案是创立一个环境文件

总结

经过运用这个webpack-bundle-analyzer包分析器能够看到项目各模块的巨细，咱们就能够按需优化了