关于react.js: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'
}