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>
);