title: webpack-bundle-analyzer分析打包文件
    tags:

    • Vue-cli3.0
    • webpack
      categories:
    • 前端
      date: 2019-08-29 00:00:00
    1. 安装：

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

    1. 在vue.config.js中配置：
    1. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    3. module.exports = {
    4.     chainWebpack: config => {
    5.         // 打包分析
    6.         if (process.env.IS_ANALYZ) {
    7.           config.plugin('webpack-report')
    8.             .use(BundleAnalyzerPlugin, [{
    9.               analyzerMode: 'static',
    10.             }]);
    11.         }
    12.     }
    13. }

    配置的时候可以根据实际需要修改分析报告，参考：https://github.com/webpack-contrib/webpack-bundle-analyzer，比如：

    1. config.plugin('webpack-report')
    2.         .use(BundleAnalyzerPlugin, [{
    3.           analyzerMode: 'server',
    4.           analyzerHost: '127.0.0.1',
    5.           analyzerPort: 8889,
    6.           reportFilename: 'report.html',
    7.           defaultSizes: 'parsed',
    8.           openAnalyzer: true,
    9.           generateStatsFile: false,
    10.           statsFilename: 'stats.json',
    11.           statsOptions: null,
    12.           logLevel: 'info'
    13.         }])
    1. 生成打包模块大小相关的报告：

    webpack-bundle-analyzer打包分析 - 图1