AngularCLIビルダーでカスタムWebpack構成を使用する方法
序章
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
を使用します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Angularプロジェクトのセットアップにある程度精通している。
このチュートリアルは、Angular v10.2.0、@angular-builders/custom-webpack
v10.0.1、moment.js
v2.29.1、およびmoment-locales-webpack-plugin
v1.2.0で検証されました。
ステップ1—プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
- cd AngularCustomWebpackConfig
次に、moment.js
をプロジェクトにインストールし、これをプロジェクトにインポートできます。
- npm install moment@2.29.1
moment.js
ライブラリのサイズを小さくするには、moment-locales-webpack-plugin
をdevDependency
として追加する必要もあります。
- npm install --save-dev moment-locales-webpack-plugin@1.2.0
カスタムWebpack構成を使用するには、@angular-builders/custom-webpack
および@angular-builders/dev-server
をdevDependency
パッケージとしてプロジェクトに追加する必要があります。
- npm install --save-dev @angular-builders/custom-webpack@10.0.1
この時点で、Angular CLI、moment.js
、moment-locales-webpack-plugin
、および@angular-builders/custom-webpack
によって生成されたAngularプロジェクトが作成されているはずです。
ステップ2—ローカライズされた時計ディスプレイを構築する
この記事のサンプルプロジェクトでは、日付と時刻の情報がフランス語で表示されます。
コードエディタでapp.component.ts
を開き、moment
をインポートして、現在の時刻を月の名前、曜日、年、時刻の形式で表示します(LLL
])フランス語(fr
)ロケールを使用:
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
を使用します。
<h1>{{ currentTimeFRLocale }}</h1>
このコードは、日付と時刻の文字列を表示します。
アプリケーションを実行します。
- npm start
そしてそれをブラウザで開きます:
アプリケーションが期待どおりに機能していることを確認したら、コンソールのmain.js
とvendor.js
の値をメモします。
Unmodified Webpack Outputchunk {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
ファイルを作成し、次のコード行を追加します。
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
キーを追加します。
"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
に更新します。
"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
を使用する必要があります。
アプリケーションを実行します。
- npm start
アプリケーションが期待どおりに機能していることを確認したら、コンソールのmain.js
とvendor.js
の値をメモします。
振り返ってみると、変更されていないWebpack構成は、次のファイルサイズでmain.js
およびvendor.js
を生成しました。
Unmodified Webpack Outputchunk {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 Outputchunk {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トピックページで演習とプログラミングプロジェクトを確認してください。