DevExtreme v21.1.5最新版下載

服務(wù)器端渲染

服務(wù)器端渲染 (SSR) 在服務(wù)器上生成靜態(tài)頁(yè)面來(lái)減少應(yīng)用程序的加載時(shí)間。

SSR 僅用于 Angular Universal 應(yīng)用程序，但對(duì)于 DevExtreme 組件，Angular Universal 和普通 Angular 應(yīng)用程序沒(méi)有區(qū)別。

您可以通過(guò)兩種方式獲得 Angular Universal 應(yīng)用程序：

• 運(yùn)行以下命令將 Universal 模塊添加到普通的 Angular 應(yīng)用程序中：

ng generate universal my-app

• 從頭開(kāi)始啟動(dòng)一個(gè)通用應(yīng)用程序并向其添加DevExtreme組件。

注意：DevExtreme Angular組件在SSR模式下不支持在運(yùn)行時(shí)切換主題，您只能使用一個(gè)主題。

服務(wù)器上的緩存請(qǐng)求

當(dāng)服務(wù)器緩存請(qǐng)求時(shí)，DevExtreme組件將使用第一次加載頁(yè)面時(shí)應(yīng)用的數(shù)據(jù)呈現(xiàn)，這減少了對(duì)服務(wù)器的請(qǐng)求數(shù)。

要啟用此功能：

1. 在 app.module.ts 文件中導(dǎo)入 DxServerTransferStateModule：

app.module.ts

import { DxServerTransferStateModule } from 'devextreme-angular';

@NgModule({
// ...
imports: [
// ...
DxServerTransferStateModule
]
})
export class AppModule { }

2. 在 app.server.module.ts 文件中導(dǎo)入 ServerTransferStateModule：

app.server.module.ts

import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
// ...
@NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})

3. 檢查 main.ts 文件是否包含以下代碼，以確保 AppModule 在服務(wù)器端呈現(xiàn)的頁(yè)面加載后被引導(dǎo)：

main.ts

document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
});

Tree Shaking

Tree shaking移除源代碼和庫(kù)代碼的未使用部分，以減少應(yīng)用程序的下載大小。

如果您僅導(dǎo)入在應(yīng)用程序中使用的模塊，則Tree shaking已經(jīng)有效。例如，以下導(dǎo)入僅從 devextreme-angular 模塊中獲取 DxButtonModule：

TypeScript

import { DxButtonModule } from 'devextreme-angular';

如果在您的應(yīng)用程序中未配置tree shaking，請(qǐng)從特定模塊而不是主 devextreme-angular 模塊導(dǎo)入導(dǎo)出以減少包大小：

TypeScript

import { DxButtonModule } from 'devextreme-angular/ui/button';

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論