react 代码分割--分离webpack--按需加载

下载：

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

一：引用

import Loadable from 'react-loadable';
const paper =Loadable({
    loader:()=>import('../component/paper.jsx'),
    loading:()=>{return null}
})
//以这种形式将组件引入
const priate =Loadable({
    loader:()=>import('../component/priate.jsx'),
    loading:()=>{return null}
})
const Sunlight =Loadable({
    loader:()=>import('../component/sunlight.jsx'),
    loading:()=>{return null}
})
const alone =Loadable({
    loader:()=>import('../component/alone.jsx'),
    loading:()=>{return null}
})

使用 npm run eject(便可将分离出config文件)

1.png

1.png

https://reacttraining.com/react-router/web/guides/code-splitting