這篇“怎么合理拆分Angular項(xiàng)目”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么合理拆分Angular項(xiàng)目”文章吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),綿竹企業(yè)網(wǎng)站建設(shè),綿竹品牌網(wǎng)站建設(shè),網(wǎng)站定制,綿竹網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,綿竹網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

Angular 讓人詬病的一點(diǎn)就是打包后體積很大，一不小心 main.js就大的離譜，其實(shí)遇到類(lèi)似的問(wèn)題，不管是體積大、數(shù)據(jù)大、還是流量大，就一個(gè)思路：拆分。再配合瀏覽器的緩存機(jī)制，能很好的優(yōu)化項(xiàng)目訪問(wèn)速度。

拆分思路

• 整個(gè)項(xiàng)目包括：強(qiáng)依賴(lài)庫(kù)(Angular框架本身)、UI組件庫(kù)及第三方庫(kù)、業(yè)務(wù)代碼部分；

• 用戶(hù)行為維度：用戶(hù)的所有訪問(wèn)基于路由，一個(gè)路由一個(gè)頁(yè)面；

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

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

自定義webpack配置

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

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 配置后，新建 webpack.dll.js 文件來(lái)寫(xiě) 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 中進(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后在項(xiàng)目根部就會(huì)有 dll 的文件夾，里面就是打包的內(nèi)容：

打包完成后，我們要在項(xiàng)目中使用 vendor.dll.js，在 angular.json 中進(jìn)行配置：

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

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

DLL 的用處是將不會(huì)頻繁更新的強(qiáng)依賴(lài)包打包合并為一個(gè) js 文件，一般用于打包 Angular 框架本身的東西。用戶(hù)第一次訪問(wèn)時(shí)瀏覽器會(huì)下載 vendor_library.js并會(huì)將其緩存，以后每次訪問(wèn)直接從緩存里拿，瀏覽器只會(huì)下載業(yè)務(wù)代碼的 js 而不會(huì)再下載框架相關(guān)的代碼，大大提升應(yīng)用加載速度，提升用戶(hù)體驗(yàn)。

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

路由級(jí)CodeSpliting

DLL 把框架部分的代碼管理好了，下面我們看看如何在 Angular 中實(shí)現(xiàn)路由級(jí)別的頁(yè)面按需加載。

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

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

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

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

然后在具體的模塊中使用路由訪問(wèn)具體的組件：

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

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

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

原因是 Angular 應(yīng)用由多個(gè)模塊組成，每個(gè)模塊中需要的功能可能來(lái)自其他模塊，比如 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)加載，打包出來(lái)的 A 組件并不包含 table 的代碼， 而是會(huì)把 table 代碼打包到當(dāng)前模塊中去，如果一個(gè)模塊中包含多個(gè)頁(yè)面，這么多頁(yè)面用了不少UI組件，那么打包出來(lái)的模塊肯定會(huì)很大。

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

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

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

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

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

以上就是關(guān)于“怎么合理拆分Angular項(xiàng)目”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。