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()插件。
配置方法:在.babelrc
web
{ "presets": [ "react" ], "plugins": [ "syntax-dynamic-import" ] }
上面babel-plugin
前綴是能夠省略的。npm
上面配好後,若是你配了eslint仍是會報錯的,若是eslint配置不對。報import() undefined
要保證eslint不報import()錯誤須要
cnpm i babel-eslint -D
bash
而後在.eslintrc
加上配置babel
module.exports = { //...若干配置 parser: "babel-eslint" }
使用babel-eslint解析才能夠識別import()react-router
而後就是使用了^_^。app
這裏我把官方的demo封裝成了一個文件loadable.jsx
dom
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'))