【笔记】React的分包

前言

React的分包学习笔记

异步组件实现Webpack自动分包

src/components/Component.jsx
1
2
3
4
5
import React from "react";

class Component extends React.Component {}

export default Component;

fallback:未加载时渲染的组件

src/App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";

const Component = React.lazy(() => import('./components/Component'));

class App extends React.Component {
render() {
return (
<Suspense fallback={ <div>Loading...</div> }>
<Component />
</Suspense>
);
}
}

export default App;

完成