不用像上一篇 【React】Code Splitting(上) 那样子写asyncComponent
,直接下载使用 @babel/plugin-syntax-dynamic-import
。可以不看上一篇直接进入该文章。
@babel/plugin-syntax-dynamic-import
搭配 @babel/core": "^7.0.0"
等babel相关插件 7+ 使用。否则报相关错误。
第一步: 安装 @babel/plugin-syntax-dynamic-import
npm install --save-dev @babel/plugin-syntax-dynamic-import
第二步: 使用 @babel/plugin-syntax-dynamic-import
在 .babelrc
文件中添加,没有则 package.json
同级添加 .babelrc
文件。
1 2 3
| { "plugins": ["@babel/plugin-syntax-dynamic-import"] }
|
注意:如果 package.json
文件中存在 babel
,则不需要 .babelrc
,直接在 package.json
添加即可,否则会报错。
1 2 3 4 5
| "babel": { "presets": [ "react-app" ], },
|
添加之后:
1 2 3 4 5 6 7 8
| "babel": { "presets": [ "react-app" ], "plugins": [ "@babel/plugin-syntax-dynamic-import", ] },
|
第三步: 安裝 react-loadable
npm i -S react-loadable
第四步: 也就是最后一步啦
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| import { Loader } from 'semantic-ui-react'; import Loadable from 'react-loadable';
const load = component => { return import(`../mobile/${component}`); }
const LoadComponent = ({ isLoading, error }) => { if (isLoading) { return <div><Loader active size='large' content='Loading' /></div>; } else if (error) { return <div>error</div>; } else { return null; } };
const Home = Loadable({ loader: () => load('Home'), loading: LoadComponent });
const Detail = Loadable({ loader: () => load('Detail'), loading: LoadComponent });
export default class Router extends Component { render() { <Switch> <Route exact path={'/'} component={Home} /> <Route exact path={'/detail'} component={Detail} /> </Switch> } }
|