React動態import()

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 <div>loading...</div>
}

export default (Loader) => {
  const LoadableComponent = Loadable({
    loader: Loader,
    loading: Loading
  })

  return class LoadableHOC extends React.Component {
    render () {
      return <LoadableComponent></LoadableComponent>
    }
  }
}

隨便寫一個需要動態導入的組件Import.jsx

import React from 'react'

class Import extends React.Component {
  render () {
    return <div>import...</div>
  }
}

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 (<div>
      <Import></Import>
    </div>)
  }
}

export default Test

然后在main.jsx

import React from 'react'
import ReactDom from 'react-dom'
import Test from '@/components/Test'

ReactDom.render(<Test />, document.getElementById('app'))