AngularThe project is too large, how to split it reasonably? The following article will introduce to you how to reasonably split Angular projects. I hope it will be helpful to you!

One of the criticisms about Angular is that it is very large after being packaged. If you are not careful, main.js will become ridiculously large. In fact, when you encounter similar problems Whether the problem is large volume, large data, or large traffic, there is only one idea: splitting. Coupled with the browser's caching mechanism, the project access speed can be optimized. [Recommended related tutorials: "angular tutorial"]

The relevant code for this article is at: https://github.com/Vibing/angular-webpack

Split ideas

• The entire project includes: strong dependency library (Angular framework itself), UI component library and third-party library, and business code part;

• User behavior dimension: all user access is based on routing, one route is one page;

It can be split from the above two points, based on the first You can package strongly dependent libraries and libraries that rarely change into a vendor_library, which can contain @angular/common, @angular/core, @angular/forms, @angular/router and other similar packages, UI component libraries or libraries such as lodash are not recommended to be packaged together, because we need to use TreeShaking, There is no need to package unused code, otherwise it will only increase the size.

Now that the strong dependency package is done, let’s package the business code based on point 2. We use route-based code spliting for packaging. The idea is very simple. Whichever page the user visits, the js corresponding to the page is downloaded. There is no need to package the unvisited pages together. This will not only increase the size, but also increase the download time, and the user experience will also deteriorate. .

Custom webpack configuration

If we want to use DLL to import strongly dependent packages into a vendor, we must use the webpack function, which is already embedded in Angular CLI webpack, but these configurations are black boxes to us.

Angular allows us to customize webpack configuration, the steps are as follows

• Installation@angular-builders/custom-webpackand@angular- devkit/build-angular

• Create a new webpack.extra.config.ts for webpack configuration

• In angular.json Make the following modifications

...
"architect":?{
??"build":?{
????"builder":?"@angular-builders/custom-webpack:browser",
????"options":?{
??????...
??????"customWebpackConfig":?{
????????//?引用要拓展的?webpack?配置
????????"path":?"./webpack.extra.config.ts",
????????//?是否替換重復插件
????????"replaceDuplicatePlugins":?true
??????}
????}
??},
??"serve":?{
????"builder":?"@angular-builders/custom-webpack:dev-server",
????"options":?{
??????"browserTarget":?"angular-webpack:build"
????}
??}
??...

Use DLL

After you can customize the webpack configuration, create a new webpack.dll.js file to write the DLL configuration:

const?path?=?require("path");
const?webpack?=?require("webpack");

module.exports?=?{
??mode:?"production",
??entry:?{
????vendor:?[
??????"@angular/platform-browser",
??????"@angular/platform-browser-dynamic",
??????"@angular/common",
??????"@angular/core",
??????"@angular/forms",
??????"@angular/router"
????],
??},
??output:?{
????path:?path.resolve(__dirname,?"./dll"),
????filename:?"[name].dll.js",
????library:?"[name]_library",
??},

??plugins:?[
????new?webpack.DllPlugin({
??????context:?path.resolve(__dirname,?"."),
??????path:?path.join(__dirname,?"./dll",?"[name]-manifest.json"),
??????name:?"[name]_library",
????}),
??],
};

Then introduce the dll in webpack.extra.config.ts

import?*?as?path?from?'path';
import?*?as?webpack?from?'webpack';

export?default?{
??plugins:?[
????new?webpack.DllReferencePlugin({
??????manifest:?require('./dll/vendor-manifest.json'),
??????context:?path.resolve(__dirname,?'.'),
????})
??],
}?as?webpack.Configuration;

Finally add a command to package the dll in package.json: "dll": "rm - rf dll && webpack --config webpack.dll.js", after executing npm run dll, there will be a dll folder at the root of the project, which contains the packaged content:

After the packaging is completed, we need to use vendor.dll.js in the project and configure it in angular.json:

"architect":?{
??...
??"build":?{
????...
????"options":?{
??????...
???????"scripts":?[
?????????{
????????????"input":?"./dll/vendor.dll.js",
????????????"inject":?true,
????????????"bundleName":?"vendor_library"
?????????}
???????]
????}
??}
}

After packaging, you can see that vendor_library.js has been introduced:

The purpose of DLL is to remove strong dependencies that will not be updated frequently. Packages are packaged and merged into a js file, which is generally used to package the Angular framework itself. When the user visits for the first time, the browser will download vendor_library.js and cache it. Every subsequent visit will be taken directly from the cache. The browser will only download the js of the business code and will not download the framework. The relevant code greatly improves the application loading speed and improves the user experience.

ps: The hash behind vendor_library will only be changed if the code inside is changed during packaging, otherwise it will not change.

Routing-level CodeSpliting

The DLL has managed the code in the framework. Now let’s see how to implement on-demand loading of routing-level pages in Angular.

Let’s take a break here. How to do routing level code splitting in React or Vue? It's probably like this:

{
??path:'/home',
??component:?()?=>?import('./home')
}

The home here points to the corresponding component, but this method cannot be used in Angular. The code can only be split in units of modules:

{
??path:'/home',
??loadChild:?()=>?import('./home.module').then(m?=>?m.HomeModule)
}

Then Use routing in a specific module to access specific components:

import?{?HomeComponent?}?from?'./home.component'

{
??path:'',
??component:?HomeComponent
}

Although you cannot import() the component directly in the router, Angular provides dynamic import of components Function:

@Component({
??selector:?'app-home',
??template:?``,
})
export?class?HomeContainerComponent?implements?OnInit?{
??constructor(
??????private?vcref:?ViewContainerRef,
??????private?cfr:?ComponentFactoryResolver
??){}
??
??ngOnInit(){
????this.loadGreetComponent()
??}

??async?loadGreetComponent(){
??????this.vcref.clear();
??????//?使用?import()?懶加載組件
??????const?{?HomeComponent?}?=?await?import('./home.component');
??????let?createdComponent?=?this.vcref.createComponent(
????????this.cfr.resolveComponentFactory(HomeComponent)
??????);??
??}
}

In this way, when routing to access a certain page, as long as the content of the page being accessed uses import() and dynamically imported with the component, wouldn't it be possible to achieve the effect of lazyLoad on the page? ?

答案是可以的。但是這樣會有一個大問題：被 lazyLoad 的組件中，其內容僅僅是當前組件的代碼，并不包含引用的其他模塊中組件的代碼。

原因是 Angular 應用由多個模塊組成，每個模塊中需要的功能可能來自其他模塊，比如 A 模塊里要用到 table 組件，而 table 需取自于 ng-zorro-antd/table 模塊。打包時 Angular 不像 React 或 Vue 可以把當前組件和用到的其他包一起打包，以 React 為例：在 A 組件引入 table 組件，打包時 table 代碼會打包到 A 組件中。而 Angular 中，在 A 組件中使用 table 組件時，并且使用 imprt() 對 A 組件進行動態(tài)加載，打包出來的 A 組件并不包含 table 的代碼， 而是會把 table 代碼打包到當前模塊中去，如果一個模塊中包含多個頁面，這么多頁面用了不少UI組件，那么打包出來的模塊肯定會很大。

那么就沒有別的方法了嗎？答案是有的，那就是把每個頁面拆成一個 module，每個頁面所用到的其他模塊或組件由當前頁面對應的模塊所承擔。

上圖中 dashboard 作為一個模塊，其下有兩個頁面，分別是 monitor 和 welcome

dashboard.module.ts:

import?{?NgModule?}?from?'@angular/core';
import?{?CommonModule?}?from?'@angular/common';
import?{?RouterModule,?Routes?}?from?'@angular/router';

const?routes:?Routes?=?[
??{
????path:?'welcome',
????loadChildren:?()?=>?import('./welcome/welcome.module').then((m)?=>?m.WelcomeModule),
??},
??{
????path:?'monitor',
????loadChildren:?()?=>?import('./monitor/monitor.module').then((m)?=>?m.MonitorModule),
??},
];

@NgModule({
??imports:?[CommonModule,?RouterModule.forChild(routes)],
??exports:?[RouterModule],
??declarations:?[],
})
export?class?DashboardModule?{}

在模塊中使用路由 loadChildren 來 lazyLoad 兩個頁面模塊，現(xiàn)在再看看 WelcomeModule：

import?{?NgModule?}?from?'@angular/core';
import?{?CommonModule?}?from?'@angular/common';
import?{?WelcomeComponent?}?from?'./welcome.component';
import?{?RouterModule,?Routes?}?from?'@angular/router';

const?routes:?Routes?=?[
??{?path:?'',?component:?WelcomeComponent?}
];
@NgModule({
??declarations:?[WelcomeComponent],
??imports:?[RouterModule.forChild(routes),?CommonModule]
})
export?class?WelcomeModule?{}

就是這么簡單，就把頁面級的 lazyLoad 完成了。當需要使用外部組件時，比如 table 組件，只要在 imports 引入即可：

import?{?NzTableModule?}?from?'ng-zorro-antd/table';

@NgModule({
??...
??imports:?[...,?NzTableModule]
})
export?class?WelcomeModule?{}

題外話：我更喜歡 React 的拆分方式，舉個例子：React 中使用 table 組件，table 組件本身代碼量比較大，如果很多頁面都使用 table，那么每個頁面都會有 table 代碼，造成不必要的浪費。所以可以配合 import()把 table組件單拉出來，打包時 table 作為單獨的 js 被瀏覽器下載并提供給需要的頁面使用，所有頁面共享這一份 js即可。但 Angular 做不到，它無法在模塊的 imports 中使用 import()的模塊 。

后續(xù)

以上都是對項目代碼做了比較合理的拆分，后續(xù)會對 Angular 性能上做合理的優(yōu)化，主要從編譯模式、變更檢測、ngFor、Worker等角度來闡述。

更多編程相關知識，請訪問：編程視頻??！

The above is the detailed content of What should I do if the project is too big? How to split Angular projects reasonably?. For more information, please follow other related articles on the PHP Chinese website!