vite
一个新的脚手架工具,尤雨溪开发的一个工具,速度确实快,本人亲手验证,项目中也已经引入。注意:Vite 需要 Node.js 版本 >= 12.0.0
- 初始化项目:npm init @vitejs/app 名称 – --template vue
- 接下来cmd中可以进行选择使用框架,选择react或者react-ts
- cd 目录
- npm install
- npm run dev
引入组件
使用vite提供的import.meta.glob方法加载所有组件文件,得到是一个函数数组,每一个函数都是一个import(url) 异步;ps:不用担心import.meta.glob加载了所有组件文件,因为他不是真的加载所有文件,而是实现了一个import(路径)方法的集合,你不调用方法,就不会加载文件
// 直接贴一下我的代码,引入了antd,使用React.lazy加载组件
import React from 'react';
import { Spin } from 'antd';
//这里的路径用了./*/*就是加载所有当前文件平级的文件夹下的所有文件
const modules = import.meta.glob('./*/*');
const LoadPage: React.FC<appProps> = ({ data }) => {
const Home = '/home/index.tsx';
const URL = data ? (data.URL ? data.URL: Home) : Home;
//使用data.URL拼接url去匹配modules里面的key,得到对应的value就是异步加载组件的函数
const Compontents = React.lazy(modules[`.${URL}`] as any);
return (
<React.Suspense fallback={<div style={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}><Spin size="large" /></div>}>
<Compontents />
</React.Suspense>
);
}
//需要使用加载异步组件的地方,直接引入此组件使用,然后根据自己的文件夹路径修改import.meta.glob里的路径
export default LoadPage;
interface appProps {
data: CD
}
interface CD {
CDID: string
CDMC: string
ID: string
URL: string
child: [CD] | null
}