序章

Angular CLIは、新しいAngularプロジェクトを作成でき、webpack構成を処理します。 ただし、カスタムWebpack機能を追加したい場合があります。

この記事では、moment.jsライブラリを使用し、未使用のロケールを削除してバンドルサイズを小さくする方法を学習します。

ノート: moment.js is a popular library for handling date and time. However, the 現在のプロジェクトステータス suggests that there may be other libraries with modern approaches that may suit your project better depending on your target audience. For educational purposes in reducing bundle sizes, this article will continue to use moment.js.

この記事では、既存のAngular CLIで生成されたプロジェクトを使用して、カスタムWebpack構成に@angular-builders/custom-webpackを使用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、Angular v10.2.0、@angular-builders/custom-webpack v10.0.1、moment.js v2.29.1、およびmoment-locales-webpack-pluginv1.2.0で検証されました。

ステップ1—プロジェクトの設定

@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。

ターミナルウィンドウで、次のコマンドを使用します。

  1. npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests

これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。

新しく作成されたプロジェクトディレクトリに移動します。

  1. cd AngularCustomWebpackConfig

次に、moment.jsをプロジェクトにインストールし、これをプロジェクトにインポートできます。

  1. npm install moment@2.29.1

moment.jsライブラリのサイズを小さくするには、moment-locales-webpack-plugindevDependencyとして追加する必要もあります。

  1. npm install --save-dev moment-locales-webpack-plugin@1.2.0

カスタムWebpack構成を使用するには、@angular-builders/custom-webpackおよび@angular-builders/dev-serverdevDependencyパッケージとしてプロジェクトに追加する必要があります。

  1. npm install --save-dev @angular-builders/custom-webpack@10.0.1

この時点で、Angular CLI、moment.jsmoment-locales-webpack-plugin、および@angular-builders/custom-webpackによって生成されたAngularプロジェクトが作成されているはずです。

ステップ2—ローカライズされた時計ディスプレイを構築する

この記事のサンプルプロジェクトでは、日付と時刻の情報がフランス語で表示されます。

コードエディタでapp.component.tsを開き、momentをインポートして、現在の時刻を月の名前、曜日、年、時刻の形式で表示します(LLL ])フランス語(fr)ロケールを使用:

src / app / app.component.ts
import { Component, OnInit } from '@angular/core';

import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentTimeFRLocale: string;

  ngOnInit(): void {
    moment.locale('fr');
    this.currentTimeFRLocale = moment().format('LLL');
  }
}

次に、コードエディタでapp.component.htmlを開き、currentTimeFRLocaleを使用します。

src / app / app.component.html
<h1>{{ currentTimeFRLocale }}</h1>

このコードは、日付と時刻の文字列を表示します。

アプリケーションを実行します。

  1. npm start

そしてそれをブラウザで開きます:

Screenshot of Angular application displaying: 8 avril 2019 15:29

アプリケーションが期待どおりに機能していることを確認したら、コンソールのmain.jsvendor.jsの値をメモします。

Unmodified Webpack Output
chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered] ... chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

moment.jsを含むベンダーファイルのサイズは3.04MBです。

ステップ3—カスタムWebpack構成を使用したローカライズされた時計表示の変更

moment.jsは、デフォルトで多くのロケールをサポートします。 プロジェクトの対象者が特定の言語を必要としない場合は、不要なロケールを削除すると、ファイルサイズを減らすのに役立ちます。 ファイルサイズを小さくすると、エンドユーザーがアプリケーションをすばやくロードできるようになります。

コードエディタを使用して、新しいcustom-webpack.config.jsファイルを作成し、次のコード行を追加します。

custom-webkpack.config.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['fr']
    })
  ]
};

これにはmoment-locales-webpack-pluginが必要であり、これを使用してfrロケールを維持します。これはフランス語の日付と時刻の用語になります。

次に、この新しい構成を使用するには、angular.jsonを変更する必要があります。

コードエディタでangular.jsonを開きます。 architect/buildオブジェクト内で、builder@angular-devkit/build-angular:browserから@angular-builders/custom-webpack:browserに更新し、customWebpackConfigキーを追加します。

angle.json
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "replaceDuplicatePlugins": true
      },
      // ...
    },
    // ...
  },
  // ...
}

これにより、カスタムWebpack構成でアプリケーションがビルドされます。

ローカルで開発する場合は、カスタムWebpack構成を適用することもできます。

コードエディタでangular.jsonに再度アクセスします。 architect/serveオブジェクト内で、builder@angular-devkit/build-angular:dev-serverから@angular-builders/custom-webpack:dev-serverに更新します。

angle.json
"architect": {
  // ...
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "AngularCustomWebpackConfig:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "AngularCustomWebpackConfig:build:production"
      }
    }
  },
  // ...
}

この時点で、アプリケーションは@angular-devkit/build-angularの代わりに@angular-builders/custom-webpackを使用し、カスタムWebpack構成を探す場所を認識しています。

注:以前は、@angular-builders/dev-serverパッケージが必要でした。 ただし、バージョン8以降、非推奨になり、代わりに @angular-builders/custom-webpack:dev-serverを使用する必要があります。

アプリケーションを実行します。

  1. npm start

アプリケーションが期待どおりに機能していることを確認したら、コンソールのmain.jsvendor.jsの値をメモします。

振り返ってみると、変更されていないWebpack構成は、次のファイルサイズでmain.jsおよびvendor.jsを生成しました。

Unmodified Webpack Output
chunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered] ... chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

現在、カスタマイズされたWebpack構成により、main.jsおよびvendor.jsのファイルサイズが縮小されています。

Custom Webpack Output
chunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered] ... chunk {vendor} vendor.js, vendor.js.map (vendor) 2.55 MB [initial] [rendered]

これは、それぞれ5kBと490kBの違いです。

結論

この記事では、@angular-builders/custom-webpackを使用してカスタムWebpack構成を使用する方法を学習しました。 カスタムWebpack構成を使用すると、AngularCLIで生成されたデフォルトよりもプロジェクトをより細かく制御できます。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。