React之组件懒加载

简介

比如你有一个react组件需要配置路由，你可能会这样引入这个组件：

import Demo from "./demo.jsx"

可是你配置路由后会发现，Demo组件并没有懒加载，而是和当前组件作为一个包。

如何实现路由懒加载？只需要使用这里提供的方法修改一下引入方式即可：

let Demo = LazyComponent(() => import('./demo.jsx'))

本方法支持jsx和tsx，可以在所有使用react的地方使用。

温馨提示：使用中如果遇到任何问题，都可以点击此处给我们提Issue。

引入

你需要执行下面的安装命令：

npm install --save jsdoor

然后在需要使用地方引入：

import LazyComponent from 'jsdoor/react/lazy-component/index'

使用

let Demo = LazyComponent(() => import('./demo.jsx'))

这个Demo就是一个组件，和普通方式引入的组件一样使用即可，不过效果却是懒加载。

说明

我们支持js或ts环境使用，除了jsx组件外，也可以是tsx。需要注意的是，都需要修改配置使得babel可以进行转义。

下面我们以webpack为例（别的类似）：

{
    test: /\.(js|jsx|ts|tsx)$/,
    include: [
        path.resolve(__dirname, './src'),
        path.resolve(__dirname, './node_modules/jsdoor/react/lazy-component')
    ],
    loader: 'babel-loader'
}