When we need to analyze which resources in the packaged dist can be further optimized, we can use the package analyzer plug-in Webpack-bundle-Analyzer. The introduction on NPM is to visualize the size of the Webpack output file using an interactive scalable tree

If the environment

  • Vue 3.0.0
  • @ vue/cli 4.5.15

Installation of the webpack-bundle-Analyzer plug-in

$ npm install --save-dev webpack-bundle-analyzer
Copy the code

Look at several ways to analyze bundles

1. In the first case, run and enable local service viewing

  1. Locate chainWebpack in webpack.config.js and add the following configuration without changing package.json

    module.exports = {
    chainWebpack: config= > {
        // Configure the packet analyzer
        config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}
Copy the code

  2. npm run serveRe-run the project (see the project configuration for details)

  3. The browser will automatically open 127.0.0.1:8888 (we can also manually type localhost:8888)

Json files are not generated, but you can only see the Stat size of each file, and the browser automatically opens after running, not the project itself

2. In the second case, build and enable the local service view

  1. Locate chainWebpack in webpack.config.js and add the following configuration 
    module.exports = {
    chainWebpack: config= > {
        // Configure the packet analyzer
        config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}
Copy the code
  2. In package.json, go to scripts and add 
    "analyz": "NODE_ENV=production vue-cli-service build --mode production"Or,"analyz": "NODE_ENV=production npm run build".Copy the code
  3. npm run analyzStart building packagingFound error (at this timenpm run build127.0.0.1:8888), because Windows does not recognize instructions to set environment variables and requires a plug-in called cross-env

    Cross-env is a script that runs cross-platform Settings and uses environment variables. It can provide a script that sets environment variables so that you can set environment variables in Unix mode and then run compatible on Windows

    3.1 Installing the cross-env plug-in

    $ npm install cross-env --save-dev
Copy the code

    3.2 Go back to package.json, find scripts, add cross-env to analyz

    "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production"Or,"analyz": "cross-env NODE_ENV=production npm run build".Copy the code

    3.3 Continuingnpm run analyz, the browser will automatically open 127.0.0.1:8888 (we can also manually enter localhost:8888)

Stats. json files are also not generated in this way, and you can also see the Stat size, Parsed size, and Gzipped size of each file

3. Third, generate HTML files

  1. Import the BundleAnalyzerPlugin in webpack.config.js, find configureWebpack, and add the following configuration 
    // vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    configureWebpack: {
        plugins: [
            // Configure the packet analyzer
            new BundleAnalyzerPlugin({
                analyzerMode: 'static'.// analyzerMode: 'server',
                // analyzerMode: 'disabled',
                // analyzerHost: '127.0.0.1',
                // analyzerPort: 8888,
                reportFilename: 'report.html'.defaultSizes: 'gzip'.generateStatsFile: true.// If true, the Webpack Stats JSON file will be generated in the bundle output directory
                openAnalyzer: false.// The report is automatically opened in the browser by default
                statsFilename: 'stats.json'.// If generateStatsFile is true, the Webpack Stats JSON file name will be generated
                statsOptions: { source: false}}]}}Copy the code
  2. In package.json, go to scripts and add 
    "analyz": "cross-env NODE_ENV=production vue-cli-service build --mode production"Or,"analyz": "cross-env NODE_ENV=production npm run build".Copy the code
  3. npm run analyzWe started building the package, and when we were done, we found that a report.html file and a stats.json file were generated in the dist folder
  4. Double-click to open the report.html file

This generates stats.json files (which are large and need to be removed at deployment time), in addition to the Stat size, Parsed size, and Gzipped size formats for each file

To optimize the

If you want to automatically open your browser or automatically generate a large stats.json file in the dist package, how can you use the package analyzer without having to use NPM Run serve and NPM run build? The answer is to create an environment file

conclusion

By using the Webpack-Bundle-Analyzer package analyzer to see the size of each module of the project, we can optimize as needed