React动态import()

react-router@v4代码分离，推荐的import()。这里分享webpack配置和使用方法。

首先安装两个必须的包

cnpm i react-loadable babel-plugin-syntax-dynamic-import -D

react-loadable是官方推荐的动态加载组件，babel-plugin-syntax-dynamic-import是babel支持webpack的import()插件。

配置方法：在.babelrc

{  "presets": [    "react"  ],  "plugins": [    "syntax-dynamic-import"  ]}

上面babel-plugin前缀是可以省略的。

上面配好后，如果你配了eslint还是会报错的，如果eslint配置不对。报import() undefined

要保证eslint不报import()错误需要

cnpm i babel-eslint -D

然后在.eslintrc加上配置

module.exports = {  //...若干配置    parser: "babel-eslint"}

使用babel-eslint解析才可以识别import()

然后就是使用了^_^。

这里我把官方的demo封装成了一个文件loadable.jsx

import React from 'react'import Loadable from 'react-loadable'const Loading = () => {  return 
    
     loading...
    
}export default (Loader) => {  const LoadableComponent = Loadable({    loader: Loader,    loading: Loading  })  return class LoadableHOC extends React.Component {    render () {      return 
        }  }}

随便写一个需要动态导入的组件Import.jsx

import React from 'react'class Import extends React.Component {  render () {    return 
    
     import...
    
  }}export default Import

包含的动态导入的容器组件Test.jsx

import React from 'react'import loadable from '@/utils/loadable'const Import = loadable(() => import('@/components/Import'))class Test extends React.Component {  render () {    return (
    
      
         
    
)  }}export default Test

然后在main.jsx

import React from 'react'import ReactDom from 'react-dom'import Test from '@/components/Test'ReactDom.render(
    , document.getElementById('app'))