React Coding-Splitting代码拆分

随应用愈来愈来复杂，特别是第三方依赖库愈来愈多的引入到项目当中，若是把全部的依赖彻底打包到一个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>
);