yarn add vite-plugin-imp 1. 删除掉import 'antd/dist/antd.less'vite.config.js完整代码 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import vitePluginImp from 'vite-plugin-imp' export default defineConfig({ plugins: [ react(), ...
在使用Vite+TS+Antd构建React项目时,如何优化项目的启动速度? 如何在Vite项目中配置TypeScript以支持最新的JavaScript特性? 在React项目中使用Antd组件库时,如何实现按需加载以减少打包体积? 前言 由于我之前学过React框架,但是由于工作中没有使用它,所以我最近开始使用了Vite、TypeScript、React Router,Redux,Axios,Ant ...
react & react-dom:基础核心 react-router:路由配置 @loadable/component:动态路由加载 classnames:更好的 className 写法 react-router-config:更好的 react-router 路由配置包 mobx-react & mobx-persist:mobx 状态管理 eslint & lint-staged & husky & prettier:代码校验配置 eslint-config-alloy:ESLint 配置插...
解决antd按需加载在开发环境下的自定义样式被覆盖问题 重构路由及layout模块,优化路由页面 增加mock请求数据,整理目录结构 分离vite plugin及其配置、环境变量,优化写法并全局统一管理 使用react-route-config 统一管理路由 调整部分样式 2022-04-29更新: 依赖@vitejs/plugin-react-refresh变更为@vitejs/plugin-react,前者...
状态管理react-redux:npm install @reduxjs/toolkit react-redux UI组件库 antd:npm install antd MOCK数据 mockjs:npm install mockjs loading加载nprogress: npm install nprogress request请求axios:npm install axios less:npm install -D less Mock vite:npm install -D vite-plugin-mock ...
支持React、JSX语法 支持ES6语法 支持Less module 支持Eslint、Prettier、Pre-commit hook 支持HMR快速热更新 支持Antd按需引入与主题样式覆盖 支持Proxy代理、alias别名 兼容传统浏览器 开发启动速度要够快,以秒计算 支持懒加载和chunk分割 介绍 前置条件之一
加载 antd 的按钮。按钮加载成功说明该 UI 框架就可以正常使用了。 5. 运行 使用 npm run dev 开发模式启动。访问 http://127.0.0.1:5174/ 就可以看到效果。 6. 部署 使用命令 npm run build 打包以后，会在项目目录中生成 dist 目录内容如下所示：这个时候， 就可以把这个 dist 的目录， 放入到你的...
React+antd-mobile+vite 尚未实现同一页面缓存可无限跳转自身,并且加载新数据,返回又缓存跳转之前的页面数据的功能(vue项目已实现) 项目地址 脚手架搭建的dome(vue+vite、react+vite、vue+farm、react+farm、vue+rsbuild、react+rsbuild) react 项目演示
react(), visualizer({ // 打包完成后自动打开浏览器,显示产物体积报告 open: true, }), ], }); 当你执行npm run build命令之后,浏览器会自动打开产物分析页面,如下图。 从中你可以很方便地观察到产物体积的分布情况,提高排查问题的效率,比如定位到体积某些过大的包,然后针对性地进行优化。
antd-mobile 按需加载,配置如下: import vitePluginImp from 'vite-plugin-imp'// vite.config.tsconst config = { plugins: [ vitePluginImp({ libList: [ { libName: 'antd-mobile', style: (name) => `antd-mobile/es/${name}/style`, libDirectory: 'es' } ] }) ]} 以上配置,在本地开发模...