Angular專案過大，怎麼合理拆分它？以下這篇文章跟大家介紹一下合理分割A(yù)ngular專案的方法，希望對(duì)大家有幫助！

Angular 讓人詬病的一點(diǎn)就是打包後體積很大，一不小心main.js就大的離譜，其實(shí)遇到類似的問題，不管是體積大、資料大、還是流量大，就一個(gè)思路：拆分。再配合瀏覽器的快取機(jī)制，能很好的最佳化專案存取速度。 【相關(guān)教學(xué)推薦：《angular教學(xué)》】

本文相關(guān)程式碼在：https://github.com/Vibing/angular-webpack

分割想法

• 整個(gè)專案包括：強(qiáng)烈依賴函式庫(Angular框架本身)、UI元件庫及第三方程式庫、業(yè)務(wù)程式碼部分；

• 使用者行為維度：使用者的所有存取基於路由，一個(gè)路由一個(gè)頁面；

從以上兩點(diǎn)可以進(jìn)行拆分，基於第1點(diǎn)可以把強(qiáng)依賴函式庫和幾乎不會(huì)變動(dòng)的函式庫打包成一個(gè)vendor_library，裡面可以包含@angular/common、@angular/core、@angular/forms、@angular/router等類似的包，UI元件庫或lodash這類庫不建議一起打包，因?yàn)槲覀円\(yùn)用TreeShaking ，沒必要把不用的程式碼也打包進(jìn)來，否則只會(huì)增加體積。

強(qiáng)依賴套件搞定了，以下基於第 2 點(diǎn)思路打包業(yè)務(wù)代碼。我們使用基於路由的 code spliting來打包。想法很簡單，使用者造訪哪個(gè)頁面，就把該頁面對(duì)應(yīng)的js 下載下來，沒必要把沒訪問的頁面一起打包，那樣不僅造成體積增大，還會(huì)增加下載時(shí)間，用戶體驗(yàn)也會(huì)隨之變差。

自訂webpack配置

我們要想使用DLL 將強(qiáng)依賴套件打進(jìn)一個(gè)vendor 裡就要使用webpack 的功能，Angular CLI 中已經(jīng)內(nèi)嵌了webpack，但這些配置對(duì)我們來說是黑盒子。

Angular 允許我們自訂webpack 配置，步驟如下

• #安裝@angular-builders/custom-webpack和@angular- devkit/build-angular

• 新建一個(gè)webpack.extra.config.ts 用於webpack 配置

• 在angular.json 中做以下修改

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

使用DLL

#可以自訂webpack 設(shè)定後，新建webpack.dll.js 檔案來寫DLL 的設(shè)定：

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",
????}),
??],
};

然後在webpack.extra.config.ts 中進(jìn)行dll 引入

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;

最後在package.json 中加入一條打包dll 的命令："dll": "rm - rf dll && webpack --config webpack.dll.js"，執(zhí)行npm run dll後在專案根部就會(huì)有dll 的資料夾，裡面就是打包的內(nèi)容：

打包完成後，我們要在專案中使用vendor.dll.js，在angular.json 中進(jìn)行設(shè)定：

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

打包後可以看到講vendor_library.js 已經(jīng)引入進(jìn)來了：

DLL 的用途是將不會(huì)頻繁更新的強(qiáng)依賴包打包合併為一個(gè)js 文件，一般用於打包Angular 框架本身的東西。使用者第一次造訪時(shí)瀏覽器會(huì)下載vendor_library.js並會(huì)將其緩存，以後每次造訪直接從快取拿，瀏覽器只會(huì)下載業(yè)務(wù)程式碼的js 而不會(huì)再下載框架相關(guān)的程式碼，大幅提升應(yīng)用程式載入速度，提升使用者體驗(yàn)。

ps: vendor_library 後面的 hash 只有打包時(shí)裡面程式碼有變動(dòng)才會(huì)重新改變 hash，否則不會(huì)改變。

路由級(jí)CodeSpliting

DLL 把框架部分的程式碼管理好了，下面我們來看看如何在 Angular 中實(shí)作路由層級(jí)的頁面按需載入。

這裡打個(gè)岔，在 React 或 Vue 中，是如何做路由級(jí)程式碼拆分的？大概是這樣：

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

這裡的home 指向的是對(duì)應(yīng)的component，但在Angular 中無法使用這種方式，只能以module 為單位進(jìn)行程式碼拆分：

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

然後在具體的模組中使用路由存取特定的元件：

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

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

雖然不能直接在router 中import() 元件，但Angular 提供了元件動(dòng)態(tài)導(dǎo)入的功能：

@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)
??????);??
??}
}

這樣在路由造訪某個(gè)頁面時(shí)，只要讓被造訪的頁面內(nèi)容使用import() 配合元件動(dòng)態(tài)導(dǎo)入，不就能達(dá)到頁面lazyLoad 的效果了嗎？

答案是可以的。但是這樣會(huì)有一個(gè)大問題：被 lazyLoad 的組件中，其內(nèi)容僅僅是當(dāng)前組件的代碼，并不包含引用的其他模塊中組件的代碼。

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

那么就沒有別的方法了嗎？答案是有的，那就是把每個(gè)頁面拆成一個(gè) module，每個(gè)頁面所用到的其他模塊或組件由當(dāng)前頁面對(duì)應(yīng)的模塊所承擔(dān)。

上圖中 dashboard 作為一個(gè)模塊，其下有兩個(gè)頁面，分別是 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 兩個(gè)頁面模塊，現(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?{}

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

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

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

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

后續(xù)

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程視頻??！

以上是專案過大怎麼辦？如何合理拆分Angular項(xiàng)目？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！