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

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

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

這時我們會考慮將代碼拆分。

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

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

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

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

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

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

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

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

由于import()方法返回的是Promise對象，我們?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 的動態(tài)導(dǎo)入，調(diào)用loadable方法可以方便的返回要使用的組件。

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

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

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

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

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

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

打開度娘的我臉色漸漸有了好轉(zhuǎn)，通過搜索，看到了webpack有個code splitting功能（代碼拆分），
前面說過，代碼拆分其實就是使用動態(tài)導(dǎo)入的技術(shù)實現(xiàn)的，那么我們就使用動態(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 來動態(tài)導(dǎo)入，它返回的是Loadable的結(jié)果，也就是我們想要的組件，我們把再把組件給對應(yīng)的路由，這就完成了基于路由的代碼拆分。

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

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

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

比如我點擊home頁面的路由時：

我再點擊page1時：

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

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

看著項目加載速度變快了，心里真特么高興

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

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

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

對應(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切換，每個前端小伙伴都做過，其實說白了，就是顯示隱藏的效果。

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

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

我們使用動態(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 方法動態(tài)導(dǎo)入。

由于TabOne是第一個默認顯示的，所以沒必要動態(tài)導(dǎo)入。

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

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

再點擊Tab 3 ：

簡直完美！