React

【React】Code Splitting（下）

@babel/plugin-syntax-dynamic-import、react-loadable

Posted by ARTROY on 2019-07-06

不用像上一篇 【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';

// import Home from '../mobile/Home';
// import Detail from '../mobile/Detail';
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>
	}
}

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
React
参与社区
-->