H5W3
当前位置:H5W3 > JavaScript > React > 正文

【React】关于require.ensure()动态加载组件

create = () => {
switch(this.state.current) {
case 'a':
require.ensure(['./a.js],(require) => {
const A = require('./a.js').default;
return <A />
})
}
}
render() {
return(
<div>
{this.create()}
</div>
)
}
//a.js
export default class A extends React.Component

大概就是这样,为什么无法动态加载A组件?


反而是直接使用

import A from './a.js'

然后再create函数中直接return <A /> 就能正常使用

回答

require-ensure

  • 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。

  • 语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

  • dependencies: 依赖的模块数组

  • callback: 回调函数,该函数调用时会传一个require参数

  • chunkName: 模块名,用于构建时生成文件时命名使用
    注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。

本文地址:H5W3 » 【React】关于require.ensure()动态加载组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址