Angular專案過大，怎麼合理拆分它？以下這篇文章跟大家介紹一下合理分割Angular專案的方法，希望對大家有幫助！
Angular 讓人詬病的一點就是打包後體積很大，一不小心main.js就大的離譜，其實遇到類似的問題，不管是體積大、資料大、還是流量大，就一個思路：拆分。再配合瀏覽器的快取機制，能很好的最佳化專案存取速度。 【相關教學推薦：《angular教學》】
本文相關程式碼在：https://github.com/Vibing/angular-webpack
整個專案包括：強烈依賴函式庫(Angular框架本身)、UI元件庫及第三方程式庫、業務程式碼部分；
使用者行為維度：使用者的所有存取基於路由，一個路由一個頁面；
從以上兩點可以進行拆分，基於第1點可以把強依賴函式庫和幾乎不會變動的函式庫打包成一個vendor_library，裡面可以包含@angular/common、@angular/core、@angular/forms、@angular/router等類似的包，UI元件庫或lodash這類庫不建議一起打包，因為我們要運用TreeShaking ，沒必要把不用的程式碼也打包進來，否則只會增加體積。
強依賴套件搞定了，以下基於第 2 點思路打包業務代碼。我們使用基於路由的 code spliting來打包。想法很簡單，使用者造訪哪個頁面，就把該頁面對應的js 下載下來，沒必要把沒訪問的頁面一起打包，那樣不僅造成體積增大，還會增加下載時間，用戶體驗也會隨之變差。
我們要想使用DLL 將強依賴套件打進一個vendor 裡就要使用webpack 的功能，Angular CLI 中已經內嵌了webpack，但這些配置對我們來說是黑盒子。
Angular 允許我們自訂webpack 配置，步驟如下
#安裝@angular-builders/custom-webpack和@angular- devkit/build-angular
新建一個webpack.extra.config.ts 用於webpack 配置
在angular.json 中做以下修改
...
"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"
}
}
...#可以自訂webpack 設定後，新建webpack.dll.js 檔案來寫DLL 的設定：
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 中進行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"，執行npm run dll後在專案根部就會有dll 的資料夾，裡面就是打包的內容：
打包完成後，我們要在專案中使用vendor.dll.js，在angular.json 中進行設定：
"architect": {
...
"build": {
...
"options": {
...
"scripts": [
{
"input": "./dll/vendor.dll.js",
"inject": true,
"bundleName": "vendor_library"
}
]
}
}
}打包後可以看到講vendor_library.js 已經引入進來了：
DLL 的用途是將不會頻繁更新的強依賴包打包合併為一個js 文件，一般用於打包Angular 框架本身的東西。使用者第一次造訪時瀏覽器會下載vendor_library.js並會將其緩存，以後每次造訪直接從快取拿，瀏覽器只會下載業務程式碼的js 而不會再下載框架相關的程式碼，大幅提升應用程式載入速度，提升使用者體驗。
ps: vendor_library 後面的 hash 只有打包時裡面程式碼有變動才會重新改變 hash，否則不會改變。
DLL 把框架部分的程式碼管理好了，下面我們來看看如何在 Angular 中實作路由層級的頁面按需載入。
這裡打個岔，在 React 或 Vue 中，是如何做路由級程式碼拆分的？大概是這樣：
{
path:'/home',
component: () => import('./home')
}這裡的home 指向的是對應的component，但在Angular 中無法使用這種方式，只能以module 為單位進行程式碼拆分：
{
path:'/home',
loadChild: ()=> import('./home.module').then(m => m.HomeModule)
}然後在具體的模組中使用路由存取特定的元件：
import { HomeComponent } from './home.component'
{
path:'',
component: HomeComponent
}雖然不能直接在router 中import() 元件，但Angular 提供了元件動態導入的功能：
@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)
);
}
}這樣在路由造訪某個頁面時，只要讓被造訪的頁面內容使用import() 配合元件動態導入，不就能達到頁面lazyLoad 的效果了嗎？
答案是可以的。但是这样会有一个大问题：被 lazyLoad 的组件中，其内容仅仅是当前组件的代码，并不包含引用的其他模块中组件的代码。
原因是 Angular 应用由多个模块组成，每个模块中需要的功能可能来自其他模块，比如 A 模块里要用到 table 组件，而 table 需取自于 ng-zorro-antd/table 模块。打包时 Angular 不像 React 或 Vue 可以把当前组件和用到的其他包一起打包，以 React 为例：在 A 组件引入 table 组件，打包时 table 代码会打包到 A 组件中。而 Angular 中，在 A 组件中使用 table 组件时，并且使用 imprt() 对 A 组件进行动态加载，打包出来的 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 两个页面模块，现在再看看 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()的模块 。
以上都是对项目代码做了比较合理的拆分，后续会对 Angular 性能上做合理的优化，主要从编译模式、变更检测、ngFor、Worker等角度来阐述。
更多编程相关知识，请访问：编程视频！！
以上是專案過大怎麼辦？如何合理拆分Angular項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
