关于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'}