为你的React工程添加异步组件支持

异步组件

首先，要明白组件的概念。React中所有继承React.Component的类都是一个React组件，React组件可大可小，功能多样。React组件一般情况下都是静态写死，也就是在代码中写死，最终编译成一个index.bundle.js，一次性加载完毕。但是某些时候，我们需要更加灵活的组件引入，只有真正用到这个组件的时候才去请求a.component.js，然后再渲染这个组件。一些等到用时再去下载的组件就叫做异步组件。

应用场景

最常用的是web单页应用。这种页面的特点是工程量庞大，不可能一次性加载所有页面组件，需要按路由（业务）对代码进行切分（code spliting）。另一种应用场景是动态的渲染需求，例如你的页面中有一个广告位，根据后台下发的字段渲染不同的广告控件，这些广告控件的代码可能独立于页面工程。

做法

首先，本文的编译环境固定为：webpack React Typescript。如果不使用webpack的同学，本文并不适用。

babel配置

webpack在2.0之后支持TC39的懒加载提案，使用import()方法进行模块的懒加载操作。如需使用，需要再为babel添加插件：

代码语言：javascript复制

npm i babel-plugin-syntax-dynamic-import -D

然后以插件的形式引入babel

代码语言：javascript复制

{
  "plugins": ["syntax-dynamic-import"]
}

tsconfig.json配置

如果你使用ts，需要将目标模块定义为esnext，不然使用import()函数会报错。

代码语言：javascript复制

"module": "esnext",

使用react-loadable封装异步组件

代码语言：javascript复制

import Loadable from 'react-loadable'
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

大工搞定，可以像使用一般组件一样使用LoadableComponent组件，组件对应的js代码并不打入主包中。当该组件第一次渲染时，会请求对应的component.chunk.js，等js文件返回后，再渲染组件内容。

react webpack 打包 babel.js 渲染

0 人点赞