Angular 4 - Webpack 打包檔案分析

-- Pageviews

Angular 4 - Webpack 打包檔案分析

Angular 4 (Angular 2) 參考都是一連串的往底層參考，有時候用 Webpack 打包完的檔案大的莫名其妙。
本篇將介紹如何用 webpack-bundle-analyzer 這個套件分析 Webpack 打包出來的檔案。

1. 安裝套件

安裝 webpack-bundle-analyzer 套件，指令如下：

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

2. Webpack 設定

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ...
var bundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
    output: {
        path: __dirname + "/js"
    }
    // ...
    plugins: [
        // ...
        new bundleAnalyzer({
            // 將分析結果以 HTML 格式儲存
            analyzerMode: "static",

            // 分析結果存放位置
            // 預設位置為 output.path + "/report.html"
            reportFilename: "report.html",
            
            // Webpack 執行完畢後，是否用瀏覽器自動開啟
            // 預設為 true
            openAnalyzer: true
        })
    ]
}

如果你是用 webpack --watch 每次異動後，都會自動開啟分析結果。

執行結果

設定完成後執行 webpack，bundle 完成後瀏覽器就會自動開啟分析結果 /js/report.html： Angular 4 - Webpack 打包檔案分析

上圖 0.js 是 Lazy Loading 的 Module，照理來說不應該這麼大，用 webpack-bundle-analyzer 才發現參考到的 mathjs 比自己寫的 Module 還要大。

參考

webpack-bundle-analyzer

Angular Webpack