webpack 包大小分析

webpack-bundle-analyzer文件大小分析工具

Angular cli 與webpack-bundle-anglyzer結合分析包大小。

一.安裝

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

二.配置

webpack.config.js

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

上面的配置是監聽build的參數，來動態判斷是否需要分析包大小，也可以直接使用這個plugin

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const config = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};
module.exports = config;

三.啟動

npm run-script build --report // 這一種是使用report參數來動態判斷是否需要包大小分析。
// 如果是直接使用plugins的話，就直接使用npm run-script build就可以了

瀏覽器打開127.0.0.1:8888地址可以看到一下效果圖