Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular CLIで作成したプロジェクトのバンドルサイズを可視化する

More than 3 years have passed since last update.

webpack-bundle-analyzerというバンドルサイズ可視化プラグインを使って、Angular CLIで作成したプロジェクトのバンドルサイズを可視化する方法を紹介します。
今回紹介する方法では、Angular CLIが公式に用意しているオプション--stats-jsonを使用するため、 「ng ejectしてwebpackの設定ファイルを編集する」などの手順は不要です。

前提

以下の環境で、ng newしたプロジェクトを使って説明を進めます。

$ ng -v                                                                                                           

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.7
Node: 9.2.0
OS: darwin x64
Angular: 
...
$ ng new bundle-analyzer-test

手順

ビルド

まずは、ng buildコマンドで対象のアプリケーションをビルドします。
この時、ビルドステータスファイルを出力するように--stats-jsonオプションをつけます。

$ ng build --prod --stats-json

ビルド生成物が保存されているdist以下を確認するとstats.jsonが保存されていることが確認できます。

json.png

webpack-bundle-analyzerのインストール

Angular CLIで作成したプロジェクトに対して、webpack-bundle-analyzerをインストールします。

$ npm install --save-dev webpack-bundle-analyzer
package.json
...
    "webpack-bundle-analyzer": "^2.10.0"
  }
}

npm run bundle-statsでwebpack-bundle-analyzerが立ち上がるようにpackage.jsonに設定を追記します。

package.json
{
...
  "scripts": {
...
    "bundle-stats": "webpack-bundle-analyzer dist/stats.json"
  },
...

確認

ここまでの手順で準備は完了です。
npm run bundle-statsを実行すると、ブラウザでhttp://localhost:8888が立ち上がりバンドルサイズが可視化されます。

スクリーンショット 2018-02-07 21.12.07.png

参考

https://github.com/angular/angular-cli/wiki/build
https://webpack.js.org/api/stats/
https://qiita.com/yuki-takei/items/de23633fe2cfbab9a08c

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away