在这篇文章中我们将解决前端 Web 开发人员的需求并向您展示如何使用 Vite 库来显着提高 Javascript 客户端应用程序的启动/更新速度。Vite 是一个基于开发服务器的构建工具它在启动应用程序之前组装 JavaScript 代码同时Vite还有助于在进行更改时减少加载速度并允许您几乎可以立即查看结果。Vite将代码创建为ES模块——现代浏览器可以用来加载JavaScript的模块在依赖较大的情况下Vite 会预先捆绑这些模块以减少浏览器对 Web 服务器的请求数量。在以下部分中我们将向您展示如何将Vite添加到由DevExtreme提供支持的React Reporting应用程序中。DevExpress新旧版本帮助文档获取可点击这篇文章查看——《界面控件DevExpress v26.1帮助文档大全CHM版本》创建示例DevExtreme应用程序首先使用DevExtreme CLI 从模板生成一个新应用程序npx -p devextreme-cli devextreme new react-app devextreme-react-sample --templatetypescriptcd devextreme-react-sample为DevExpress文档查看器添加一个视图npx devextreme add view document-viewer为DevExpress Report Designer添加一个视图npx devextreme add view report-designer配置应用程序来使用Vite和DevExpress Reports首先修改 package.json 文件1. 添加dependenciesdevexpress/analytics-core: ^22.1.2, devexpress-reporting: ^22.1.2, jquery-ui-dist: 1.13.12. 添加devDependenciesvitejs/plugin-react: ^1.3.0, vite: ^2.9.93. 将脚本部分替换为以下内容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 文件添加入口点body classdx-viewport noscriptYou need to enable JavaScript to run this app./noscript div idroot/div script typemodule src/src/jquery.js/script script typemodule src/src/jquery-ui.js/script script typemodule src/src/index.tsx/script /body4. 添加具有以下内容的文件 src/jquery-ui.jsimport jquery-ui-dist/jquery-ui;5. 添加具有以下内容的文件 src/jquery.jsimport 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 } } }) Web开发者福音！创建第一个Vite支持的Web应用（1/2）
在这篇文章中我们将解决前端 Web 开发人员的需求并向您展示如何使用 Vite 库来显着提高 Javascript 客户端应用程序的启动/更新速度。Vite 是一个基于开发服务器的构建工具它在启动应用程序之前组装 JavaScript 代码同时Vite还有助于在进行更改时减少加载速度并允许您几乎可以立即查看结果。Vite将代码创建为ES模块——现代浏览器可以用来加载JavaScript的模块在依赖较大的情况下Vite 会预先捆绑这些模块以减少浏览器对 Web 服务器的请求数量。在以下部分中我们将向您展示如何将Vite添加到由DevExtreme提供支持的React Reporting应用程序中。DevExpress新旧版本帮助文档获取可点击这篇文章查看——《界面控件DevExpress v26.1帮助文档大全CHM版本》创建示例DevExtreme应用程序首先使用DevExtreme CLI 从模板生成一个新应用程序npx -p devextreme-cli devextreme new react-app devextreme-react-sample --templatetypescriptcd devextreme-react-sample为DevExpress文档查看器添加一个视图npx devextreme add view document-viewer为DevExpress Report Designer添加一个视图npx devextreme add view report-designer配置应用程序来使用Vite和DevExpress Reports首先修改 package.json 文件1. 添加dependenciesdevexpress/analytics-core: ^22.1.2, devexpress-reporting: ^22.1.2, jquery-ui-dist: 1.13.12. 添加devDependenciesvitejs/plugin-react: ^1.3.0, vite: ^2.9.93. 将脚本部分替换为以下内容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 文件添加入口点body classdx-viewport noscriptYou need to enable JavaScript to run this app./noscript div idroot/div script typemodule src/src/jquery.js/script script typemodule src/src/jquery-ui.js/script script typemodule src/src/index.tsx/script /body4. 添加具有以下内容的文件 src/jquery-ui.jsimport jquery-ui-dist/jquery-ui;5. 添加具有以下内容的文件 src/jquery.jsimport 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 } } })