在这篇文章中,我们将解决前端 Web 开发人员的需求,并向您展示如何使用 Vite 库来显着提高 Javascript 客户端应用程序的启动/更新速度。
Vite 是一个基于开发服务器的构建工具,它在启动应用程序之前组装 JavaScript 代码,同时Vite还有助于在进行更改时减少加载速度,并允许您几乎可以立即查看结果。
Vite将代码创建为ES模块——现代浏览器可以用来加载JavaScript的模块,在依赖较大的情况下,Vite 会预先捆绑这些模块,以减少浏览器对 Web 服务器的请求数量。在以下部分中,我们将向您展示如何将Vite添加到由DevExtreme提供支持的React Reporting应用程序中。
DevExtreme Complete Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网
首先,使用DevExtreme CLI 从模板生成一个新应用程序:
npx -p devextreme-cli devextreme new react-app devextreme-react-sample --template="typescript"
cd devextreme-react-sample
为DevExpress文档查看器添加一个视图:
npx devextreme add view document-viewer
为DevExpress Report Designer添加一个视图:
npx devextreme add view report-designer
首先,修改 package.json 文件:
1. 添加dependencies:
"@devexpress/analytics-core": "^22.1.2","devexpress-reporting": "^22.1.2","jquery-ui-dist": "1.13.1"
2. 添加devDependencies:
"@vitejs/plugin-react": "^1.3.0","vite": "^2.9.9"
3. 将脚本部分替换为以下内容:
"scripts": {"start": "vite","build": "vite build","preview": "vite preview","build-themes": "devextreme build","postinstall": "npm run build-themes"},
然后,修改 index.html 文件:
1. 将 index.html 文件从 public 文件夹移动到项目根文件夹。
2. 从 index.html 文件中删除 %PUBLIC_URL% 字符串。
3. 向 index.html 文件添加入口点:
4. 添加具有以下内容的文件 src/jquery-ui.js:
import "jquery-ui-dist/jquery-ui";
5. 添加具有以下内容的文件 src/jquery.js:
import jQuery from "jquery";Object.assign(window, { $: jQuery, jQuery })
6. 在根文件夹中添加一个 vite.config.js 文件,内容如下:
import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'// https://vitejs.dev/config/export default defineConfig({plugins: [react()],build: {rollupOptions: {treeshake: false}}})
DevExpress Reporting
DevExpress Reporting是.NET Framework下功能完善的报表平台,它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集,包括数据透视表、图表,因此您可以构建无与伦比、信息清晰的报表。
留言与评论(共有 0 条评论) “” |