使用Angular 7调整webpack配置，自由控制捆绑大小和行为(ag-Grid入门教程)
我叫做Loved。
感谢所有的Qiita贡献者，谢谢你们一直以来的辛勤付出。
太长；不看预备版。
在Angular7中，ng eject命令，该命令在Angular6中可用，已被废弃。
因此，本次将介绍在Angular7中使用Angular-CLI进行开发时的webpack详细配置方法。
通过编辑angular.json并创建webpack扩展配置文件来构建的方式。
目标读者
・如果使用Angular 7的默认构建设置无法满足需求的人，需要调整Angular内部运行的webpack部分的配置。
・由于我们已经准备好了在Angular 7环境下进行初始设置，因此也希望那些打算学习/使用Angular 7（和ag-Grid）的人能够享受到这个过程中。
环境
>> ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.3.0
Node: 9.3.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.13.0
@angular-devkit/core 7.3.0
@angular-devkit/schematics 7.3.0
@schematics/angular 7.3.0
@schematics/update 0.13.0
rxjs 6.3.3
typescript 3.2.2
尽管Node的版本较旧，但请不要在意。
这次我们将借助ag-grid的教程来介绍步骤。
ag-grid是一个免费的社区版网格模块。
https://www.ag-grid.com/angular-getting-started/
步骤
我们开始吧。
前期准备与之前的教程页面几乎相同。
如果你已经理解得很好，可以跳过准备步骤，没有问题。
准备工作
// インストールとプロジェクトの作成
npm install -g @angular/cli
ng new my-app --style scss --routing false
cd my-app
// ag-gridのインストール
npm install --save ag-grid-community ag-grid-angular
// プロジェクト内 app.module.tsを編集
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';// ←追加
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AgGridModule.withComponents([])],// ←追加
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
// styles.scssを編集
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
// app.component.ts 編集
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
columnDefs = [
{headerName: 'Class', field: 'class' },
{headerName: 'Name', field: 'name' },
{headerName: 'Power', field: 'power'}
];
rowData = [
{ class: 'Berserker', name: 'Nightingale', power: 35000 },
{ class: 'Assassin', name: 'Carmilla', power: 32000 },
{ class: 'Avenger', name: 'Jeanne alter', power: 72000 }
];
}
// app.component.html を以下に置き換え
<ag-grid-angular
style="width: 500px; height: 200px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
// トップページにgridが表示されていればOK。
本题
假设我们想要构建上述创建的Web应用程序。
其中一个要求是“一个捆绑文件的大小应小于1MB”。
现在就运行ng build –prod吧。
>> ng build --prod
Date: 2019-02-07T15:49:28.086Z
Hash: 817914fa2637c6d3b8aa
Time: 66877ms
chunk {0} runtime.a5dd35324ddfd942bef1.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.12eccedba99646c7daca.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.00849e0d189f184e52e5.js (main) 1.01 MB [initial] [rendered]
chunk {3} polyfills.407a467dedb63cfdd103.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.eb752abcca03cc6fe597.css (styles) 115 kB [initial] [rendered]
哎呀哎呀。捆绑后的main.js文件大小超过1MB了…
(为了突出这个问题，我添加了ag-Grid的导入代码。
实际上，我还要导入许多其他供应商的库，所以文件大小会更大呢。)
那么，我们可以使用–vendorChunk选项将业务逻辑和供应商分离。是的，那就试着加上吧！(开低效的戏谑)
>> ng build --prod --vendorChunk
Date: 2019-02-07T15:58:37.946Z
Hash: 63108113a0539a610fb7
Time: 58052ms
chunk {0} runtime.a5dd35324ddfd942bef1.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.12eccedba99646c7daca.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.dda08de101eb4da8c253.js (main) 6.04 kB [initial] [rendered]
chunk {3} polyfills.407a467dedb63cfdd103.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.eb752abcca03cc6fe597.css (styles) 115 kB [initial] [rendered]
chunk {5} vendor.4d52dd9a82dee508d6a2.js (vendor) 1.01 MB [initial] [rendered]
嗯。最終供应商方面超过了1MB。仅仅通过Angular-CLI的设置来解决似乎很困难。因此，让我们尝试一下本次介绍的方法吧。（终于进入正题了…）
// 使用する拡張モジュールをインストール
npm -D install @angular-builders/custom-webpack
npm -D install ngx-build-plus //←1行目のモジュールだけで動かなかったら入れてみて下さい
npm -D install webpack //←上に同じ。
// angular.json を編集
//"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-builders/custom-webpack:browser", //←に変更
"options": {
"customWebpackConfig": {//←追加
"path": "./extra-webpack.config.js"//←追加
}, //←追加
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
//....
// 上で指定した場所(今回ならangular.jsonと同階層)にextra-webpack.config.jsを作成し、
// 追加のwebpack詳細設定を記載する。
// 記載した部分のみがangularのbuilderに追加で反映される
// 今回はmaxSizeを1MB未満にすることでチャンクファイルのサイズ上限を調整した。
const webpack = require('webpack');
module.exports = {
output: {
filename: "[name].js" // name of the generated bundle
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 50000,
maxSize: 900000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '.',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
好啊，我们重新构建吧。
>> ng build --prod
Date: 2019-02-07T17:06:48.049Z
Hash: bbabf25c9a51d613d39a
Time: 41291ms
chunk {0} runtime.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.d0ae3f07.js (es2015-polyfills.d0ae3f07) 56.4 kB [initial] [rendered]
chunk {2} main.31ecd969.js (main.31ecd969) 29.7 kB [initial] [rendered]
chunk {3} main.54813583.js (main.54813583) 278 kB [initial] [rendered]
chunk {4} main.65932fe3.js (main.65932fe3) 33.8 kB [initial] [rendered]
chunk {5} main.88436b06.js (main.88436b06) 191 kB [initial] [rendered]
chunk {6} main.8ff27ea1.js (main.8ff27ea1) 238 kB [initial] [rendered]
chunk {7} main.bc2eed23.js (main.bc2eed23) 29.9 kB [initial] [rendered]
chunk {8} main.d0ae3f07.js (main.d0ae3f07) 2.73 kB [initial] [rendered]
chunk {9} main.defd55b6.js (main.defd55b6) 238 kB [initial] [rendered]
chunk {10} polyfills.d0ae3f07.js (polyfills.d0ae3f07) 41 kB [initial] [rendered]
chunk {11} styles.d0ae3f07.eb752abcca03cc6fe597.css, styles.d0ae3f07.js (styles.d0ae3f07) 115 kB [initial] [rendered]
要件已完成！！恭喜恭喜～
当然不仅仅是修改包大小，只要是webpack中可以配置的项，
只需将其填写在之前提到的扩展配置文件中，即可生效。
特别是构建命令没有太大变化，只需使用ng build –prod就可以搞定，非常方便。
总结
安装必要的模块后，只需要编辑适当的配置文件即可。
个人认为相比于ng eject来说，这种方法更容易。
由于Angular的版本升级，相关步骤经常会发生变化，这真的很痛苦。
比如在Angular4中，有些步骤根本没有什么用，这真的很令人失望。
如果能够为Angular 7的日本语文档做出贡献，我会非常高兴。非常感谢您的阅览。
