React Coding-Splitting代码拆分

Posted 2021-01-08 changlon

随应用越来越来复杂，特别是第三方依赖库越来越多的引入到项目当中，如果把所有的依赖完全打包到一个bundle文件当中，这个文件的体积势必会随着应用的复杂度增加会越来越大，这样在应用需要花费大量的时间去加载这个庞大的文件。

Coding-Splitting的作用

React提供的Coding-Splitting即代码拆分可以避免将所有依赖全部打包进一个文件，应用需要耗费大量时间加载的问题，通过代码拆分可以将应用拆分打包成多个体积更小可控的包，这些包可以根据用户的需求，实现 按需动态加载 减少初始加载的代码量。

Coding-Splitting的使用

1.import()方法

代码拆分打包最常用的方式就是通过es6提供的import()方法来实现

 import(/* webpackChunkName: ‘layout/containers‘ */ ‘layout/containers‘)

2. React Loadable

before:

import OtherComponent from ‘./OtherComponent‘;
const MyComponent = () => <OtherComponent/>;

after:

import Loadable from ‘react-loadable‘;

const LoadableComponent = Loadable({
    loader: import(‘./OtherComponent‘),
    loading: <div>Loding...</div>
});

const MyComponent = () => <LoadableComponent/>;

具体项目中分包的颗粒度如何控制需要在开发中斟酌权衡，通常按路由进行分包是比较好的实践

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom‘;
import Loadable from ‘react-loadable‘;

const Loading = () => <div>Loading...</div>;

const Home = Loadable({
  loader: () => import(‘./routes/Home‘),
  loading: Loading,
});

const About = Loadable({
  loader: () => import(‘./routes/About‘),
  loading: Loading,
});

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </Switch>
  </Router>
);