DevExtreme v21.1.5最新版下載

服務器端渲染

服務器端渲染 (SSR) 在服務器上生成靜態頁面來減少應用程序的加載時間。

SSR 僅用于 Angular Universal 應用程序，但對于 DevExtreme 組件，Angular Universal 和普通 Angular 應用程序沒有區別。

您可以通過兩種方式獲得 Angular Universal 應用程序：

• 運行以下命令將 Universal 模塊添加到普通的 Angular 應用程序中：

ng generate universal my-app

• 從頭開始啟動一個通用應用程序并向其添加DevExtreme組件。

注意：DevExtreme Angular組件在SSR模式下不支持在運行時切換主題，您只能使用一個主題。

服務器上的緩存請求

當服務器緩存請求時，DevExtreme組件將使用第一次加載頁面時應用的數據呈現，這減少了對服務器的請求數。

要啟用此功能：

1. 在 app.module.ts 文件中導入 DxServerTransferStateModule：

app.module.ts

import { DxServerTransferStateModule } from 'devextreme-angular';

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

2. 在 app.server.module.ts 文件中導入 ServerTransferStateModule：

app.server.module.ts

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

3. 檢查 main.ts 文件是否包含以下代碼，以確保 AppModule 在服務器端呈現的頁面加載后被引導：

main.ts

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

Tree Shaking

Tree shaking移除源代碼和庫代碼的未使用部分，以減少應用程序的下載大小。

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

TypeScript

import { DxButtonModule } from 'devextreme-angular';

如果在您的應用程序中未配置tree shaking，請從特定模塊而不是主 devextreme-angular 模塊導入導出以減少包大小：

TypeScript

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

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群4：715863792      歡迎一起進群討論