Vite 是一個基于開發服務器的構建工具，它在啟動應用程序之前組裝 JavaScript 代碼，同時Vite還有助于在進行更改時減少加載速度，并允許您幾乎可以立即查看結果。

在這篇文章中，我們將解決前端 Web 開發人員的需求，并向您展示如何使用 Vite 庫來顯著提高 Javascript 客戶端應用程序的啟動/更新速度。

Vite將代碼創建為ES模塊——現代瀏覽器可以用來加載JavaScript的模塊，在依賴較大的情況下，Vite 會預先捆綁這些模塊，以減少瀏覽器對 Web 服務器的請求數量。在以下部分中，我們將向您展示如何將Vite添加到由DevExtreme提供支持的React Reporting應用程序中。

在上文中，我們已為大家介紹如何創建示例DevExtreme應用、配置應用程序來使用Vite和DevExpress Reports，具體步驟可點擊查看回顧>>

接下來我們將繼續介紹如何添加DevExpress Document Viewer和Report Designer組件等。

添加DevExpress Document Viewer和Report Designer組件

添加Document Viewer的步驟

將 src/pages/document-viewer/document-viewer.tsx 文件內容替換為以下內容：

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './document-viewer.scss';

class ReportViewer extends React.Component {
constructor(props) {
super(props);
this.viewerRef = React.createRef();
this.reportUrl = ko.observable("Invoice");
this.requestOptions = {
host: "http://localhost:5001/",
invokeAction: "DXXRDV"
};
}
render() {
return (<div ref={this.viewerRef} data-bind="dxReportViewer: $data"></div>);
}
componentDidMount() {
ko.applyBindings({
reportUrl: this.reportUrl,
requestOptions: this.requestOptions
}, this.viewerRef.current);
}
componentWillUnmount() {
ko.cleanNode(this.viewerRef.current);
}
};

export default () => (
<React.Fragment>
<h2 className={'content-block'}>Document Viewer</h2>
<div className={'content-block'}>
<div className={'dx-card responsive-paddings'}>
<div style={{ width: "100%", height: "700px" }}>
<ReportViewer />
</div>
</div>
</div>
</React.Fragment>
);

以下屬性指定報表名稱：

this.reportUrl = ko.observable("Invoice");

主機指定服務器端應用地址：

host: //localhost:5001/

最后在 src/pages/document-viewer/document-viewer.scss 頁面添加如下內容：

@import url("../../../node_modules/jquery-ui/themes/base/all.css");
@import url("../../../node_modules/devextreme/dist/css/dx.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");

添加DevExpress Report Designer的步驟

將 src/pages/report-designer/report-designer.tsx 文件內容替換為以下內容：

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-reportdesigner';
import './report-designer.scss';

class ReportDesigner extends React.Component {
constructor(props) {
super(props);
this.designerRef = React.createRef();
this.reportUrl = ko.observable("Invoice");
this.requestOptions = {
host: "http://localhost:5001/",
getDesignerModelAction: "/DXXRD/GetDesignerModel"
};
}
render() {
return (<div ref={this.designerRef} data-bind="dxReportDesigner: $data"></div>);
}
componentDidMount() {
ko.applyBindings({
reportUrl: this.reportUrl,
requestOptions: this.requestOptions
}, this.designerRef.current);
}
componentWillUnmount() {
ko.cleanNode(this.designerRef.current);
}
};
export default () => (
<React.Fragment>
<h2 className={'content-block'}>Report Designer</h2>
<div className={'content-block'}>
<div className={'dx-card responsive-paddings'}>
<div style={{ width: "100%", height: "700px" }}>
<ReportDesigner />
</div>
</div>
</div>
</React.Fragment>
);

以下屬性指定報表名稱：

this.reportUrl = ko.observable("Invoice");

主機指定服務器端應用地址：

host: //localhost:5001/

因此，將以下內容添加到 src/pages/report-designer/report-designer.scss 頁面以完成此步驟：

@import url("../../../node_modules/jquery-ui/themes/base/all.css");
@import url("../../../node_modules/devextreme/dist/css/dx.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css");
@import url("../../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");
@import url("../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css");

運行報表后端應用程序

Web報表組件需要一個后端應用程序來存儲和處理報告，運行后端應用程序以確定地址，并將該地址分別指定為 src/pages/document-viewer/document-viewer.tsx和src/pages/report-designer/report-designer中 ReportViewer和ReportDesigner組件的主機選項.tsx文件。

如果您剛剛創建了一個后端應用程序，可以從模板中創建一個TestReport，除了這個簡單的報告，您還可以加載我們的發行版附帶的報表。要加載報表，請在官方的WinForms Reporting演示中打開 Invoice 模塊，切換到 Designer，然后將報表另存為REPX文件。在Visual Studio Report Designer中打開TestReport 報表，然后單擊報表智能標記中的打開/導入以加載您保存的REPX文件。

運行客戶端應用程序

確保后端應用程序正在運行，導航到devextreme-react-sample文件夾，然后執行以下命令：

npm install
npm run start

完成后，應用程序應如下所示：

DevExpress技術交流群6：600715373      歡迎一起進群討論