【React】首屏加载速度优化四：代码拆分（路由拆分）

单页应用打包完，会生成一个巨大的js文件，这个文件会在首次打开页面时加载，非常耗时，可能会达到10s，用户可没这么心情等待。

若把该文件拆分成若干小文件，每次只加载必要的文件，这样会极大改善首屏时间；

拆分步骤如下：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./page/Home'));
const News = lazy(() => import('./page/News'));

const App = () => (
  <Router>
    <Suspense fallback={<div>首屏加载前显示的内容，加载中...</div>}>
      <Switch>
        <Route path="/"     component={Home} exact />
        <Route path="/news" component={News}/>
      </Switch>
    </Suspense>
  </Router>
);