vite2.0+ react实现按需动态异步加载组件

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
}