乐趣区

关于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'
}
退出移动版