React動態import()

React動態import()

react-router@v4代碼分離,推薦的import()。這裏分享webpack配置和使用方法。react

首先安裝兩個必須的包webpack

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

react-loadable是官方推薦的動態加載組件,babel-plugin-syntax-dynamic-import是babel支持webpack的import()插件。
配置方法:在.babelrcweb

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

上面babel-plugin前綴是能夠省略的。npm

上面配好後,若是你配了eslint仍是會報錯的,若是eslint配置不對。報import() undefined
要保證eslint不報import()錯誤須要
cnpm i babel-eslint -Dbash

而後在.eslintrc加上配置babel

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

使用babel-eslint解析才能夠識別import()react-router

而後就是使用了^_^。app

這裏我把官方的demo封裝成了一個文件loadable.jsxdom

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'))
相關文章
相關標籤/搜索