vue-cli2和vue-cli3 打包分析

案例: 以element-admin和iview-admin為例.

 

在vue-cli3中的配置

1、 安裝
npm install webpack-bundle-analyzer --save-dev
 
2、 vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      }
    }
  }
 
3、 package.json
 "analyz": "npm_config_report=true npm run build" // 打包命令,根據實際靈活修改
 
4、 npm run analyz    //默認8888  端口
5、 瀏覽器打開localhost:8888

　　

在vue-cli2中的配置

安裝插件
    npm install webpack-bundle-analyzer --save-dev

在build/webpack.prod.config.js引入配置

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

plugins: [
    new BundleAnalyzerPlugin({
        analyzerMode: 'server',
        analyzerHost: '127.0.0.1',
        analyzerPort: 8889,
        reportFilename: 'report.html',
        defaultSizes: 'parsed',
        openAnalyzer: true,
        generateStatsFile: false,
        statsFilename: 'stats.json',
        statsOptions: null,
        logLevel: 'info'
    }),
]

運行
    npm run build // 正常的打包命令
瀏覽器打開
    localhost:8889

　　

 element-admin的分析圖

 

 iview-admin的分析圖