摘要：原文來自我的代碼拆分與動(dòng)態(tài)導(dǎo)入當(dāng)項(xiàng)目越做越大時(shí)，體積過大導(dǎo)致加載速度過慢，性能問題直接影響用戶體驗(yàn)。這時(shí)我們會(huì)考慮將代碼拆分。

原文來自我的github: https://github.com/Vibing/blog

當(dāng)項(xiàng)目越做越大時(shí)，體積過大導(dǎo)致加載速度過慢，性能問題直接影響用戶體驗(yàn)。

這時(shí)我們會(huì)考慮將代碼拆分。

拆分，顧名思義就是將一個(gè)大的東西拆分成N個(gè)小的東西，用公式表示就是：Sum = n * Sub

代碼拆分基于動(dòng)態(tài)導(dǎo)入

什么是動(dòng)態(tài)導(dǎo)入？就是我需要什么，你給我什么，我不需要的時(shí)候，你別給我，我嫌重。

動(dòng)態(tài)導(dǎo)入可以將模塊分離成一個(gè)多帶帶的文件 在需要的時(shí)候加載進(jìn)來。

對(duì)于動(dòng)態(tài)導(dǎo)入，webpack 提供了兩個(gè)類似的技術(shù)。

第一種，也是優(yōu)先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。

第二種，則是使用 webpack 特定的 require.ensure。

從webpack 2以后，一般使用第一種。

由于import()方法返回的是Promise對(duì)象，我們?yōu)榱四芊奖愕姆祷亟M件，
這里推薦使用async-loadable插件

例子代碼：

import loadable from "async-loadable";
import Loading from "./my-loading-component";

const LoadableComponent = loadable({
  loader: () => import("./my-component"),
  loading: status => ,
});

export default class App extends React.Component {
  render() {
    return ;
  }
}

代碼里有熟悉的 import() 方法。async-loadable 使用 webpack 的動(dòng)態(tài)導(dǎo)入，調(diào)用loadable方法可以方便的返回要使用的組件。

下面我將以我本人的項(xiàng)目經(jīng)歷，來講解代碼拆分（code splitting）

當(dāng)初還是小白的我，一開始哪知道有代碼拆分這個(gè)技術(shù)啊，就一個(gè)人負(fù)責(zé)一個(gè)小項(xiàng)目，一開始項(xiàng)目不大，跑起來也是嗖嗖的，這里先貼一下路由代碼：

import Home from "./home";
import Page1 from "./page1";
import Page2 from "./page2";

這里沒有使用動(dòng)態(tài)導(dǎo)入，而是直接將所有頁面靜態(tài)引入進(jìn)來，然后賦到對(duì)應(yīng)路由上。
這么做的壞處就是：打包時(shí)，整個(gè)項(xiàng)目所有的頁面都會(huì)打包到一個(gè)文件中，隨著頁面增多，這個(gè)文件也越來越大，最后我看了一下，達(dá)到了近25M（我嚇得打開度娘...）。

如果用一張圖來表示的話，這張圖在適合不過了：

哈哈，整個(gè)一坨有沒有。所有路由在這一坨紅色里，看著真特么憋屈啊

打開度娘的我臉色漸漸有了好轉(zhuǎn)，通過搜索，看到了webpack有個(gè)code splitting功能（代碼拆分），
前面說過，代碼拆分其實(shí)就是使用動(dòng)態(tài)導(dǎo)入的技術(shù)實(shí)現(xiàn)的，那么我們就使用動(dòng)態(tài)導(dǎo)入來優(yōu)化一把之前的路由：

import Loadable from "async-loadable";
import Loading from "./my-loading-component";

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

const Page1 = Loadable({
    loader: () => import(`./page1`),
    loading: Loading
  });

const Paeg2 = Loadable({
    loader: () => import(`./page2`),
    loading: Loading
  });

} />
 } />
 } />

我們不再使用 import module from "url" 來靜態(tài)引入模塊，而是使用 loadComponent 來動(dòng)態(tài)導(dǎo)入，它返回的是Loadable的結(jié)果，也就是我們想要的組件，我們把再把組件給對(duì)應(yīng)的路由，這就完成了基于路由的代碼拆分。

使用以后，鄙人懷著激動(dòng)的心情開始打包項(xiàng)目，當(dāng)我看到控制臺(tái)的打包日志時(shí)，我的表情是這樣的：

咳咳，這種好事情當(dāng)然要分享一下啦，你要的結(jié)果：

可以看到，webpack打包時(shí)已經(jīng)將之前的一個(gè)臃腫文件按路由拆分成了三個(gè)文件，當(dāng)我們點(diǎn)擊一個(gè)路由時(shí)，會(huì)動(dòng)態(tài)加載對(duì)應(yīng)的文件。

比如我點(diǎn)擊home頁面的路由時(shí)：

我再點(diǎn)擊page1時(shí)：

嗯，是按照路由來拆分的代碼，完美~

這樣看來，我們需要將之前的那張圖改成這樣的：

看著項(xiàng)目加載速度變快了，心里真特么高興

其實(shí)基于路由的代碼拆分已經(jīng)可以滿足絕大多數(shù)項(xiàng)目了，再大的項(xiàng)目也能滿足。

但隨著項(xiàng)目做的多了，慢慢的發(fā)現(xiàn)了一個(gè)問題：代碼浪費(fèi)。

比如我要做一個(gè)Tab切換的功能，像醬紫的：

對(duì)應(yīng)的代碼大概是醬紫的：

import { Tabs } from "antd";
import TabOne from "./component/tab1";
import TabTwo from "./component/tab2";
import TabThree from "./component/tab3";

const TabPane = Tabs.TabPane;

export default class Home extends Component {
  render() {
    return (
      
        
          
        
        
          
        
        
          
        
      
    );
  }
}

Tab切換，每個(gè)前端小伙伴都做過，其實(shí)說白了，就是顯示隱藏的效果。

但是在這個(gè)頁面中，已經(jīng)把每個(gè)Tab里的代碼都加載進(jìn)來了，如果用戶只看第一個(gè)Tab，其他Tab不點(diǎn)擊，就造成了代碼浪費(fèi)。

如何解決這個(gè)問題呢？還是那句話：我需要什么，你給我什么，我不需要的時(shí)候，你別給我，我嫌重。

我們使用動(dòng)態(tài)導(dǎo)入的方式改造一下代碼：

import { Tabs } from "antd";
import Loadable from "async-loadable";
import TabOne from "./component/tab1";
import Loading from "./component/loading";

const TabPane = Tabs.TabPane;

const loadComponent = path =>
  Loadable({
    loader: () => import(`${path}`),
    loading: Loading
  });

const Tab2 = loadComponent("./component/tab2.tsx");
const Tab3 = loadComponent("./component/tab3.tsx");

export default class Home extends Component {
  render() {
    return (
      
        
          
        
        
          
        
        
          
        
      
    );
  }
}

同樣 我們不再使用import module from "url"的方式，而是使用 loadComponent 方法動(dòng)態(tài)導(dǎo)入。

由于TabOne是第一個(gè)默認(rèn)顯示的，所以沒必要?jiǎng)討B(tài)導(dǎo)入。

現(xiàn)在我們來點(diǎn)擊Tab 2看看效果：

非常棒，正是我們想要的。

再點(diǎn)擊Tab 3 ：

簡直完美！