1. 前言
隨著前端項目的不斷擴大，一個原本簡單的網頁應用所引用的js文件可能變得越來越龐大。尤其在近期流行的單頁面應用中，越來越依賴一些打包工具（例如webpack），通過這些打包工具將需要處理、相互依賴的模塊直接打包成一個單獨的bundle文件，在頁面第一次載入時，就會將所有的js全部載入。但是，往往有許多的場景，我們并不需要在一次性將單頁應用的全部依賴都載下來。例如：我們現在有一個帶有權限的"訂單后臺管理"單頁應用，普通管理員只能進入"訂單管理"部分，而超級用戶則可以進行"系統管理"；或者，我們有一個龐大的單頁應用，用戶在第一次打開頁面時，需要等待較長時間加載無關資源。這些時候，我們就可以考慮進行一定的代碼拆分（code splitting）。
2. 實現方式
2.1 簡單的按需加載
代碼拆分的核心目的，就是實現資源的按需加載。考慮這么一個場景，在我們的網站中，右下角有一個類似聊天框的組件，當我們點擊圓形按鈕時，頁面展示聊天組件。
btn.addEventListener('click', function(e) {
// 在這里加載chat組件相關資源 chat.js
});
從這個例子中我們可以看出，通過將加載chat.js的操作綁定在btn點擊事件上，可以實現點擊聊天按鈕后聊天組件的按需加載。而要動態加載js資源的方式也非常簡單（方式類似熟悉的jsonp）。通過動態在頁面中添加<scrpt>標簽，并將src屬性指向該資源即可。
btn.addEventListener('click', function(e) {
// 在這里加載chat組件相關資源 chat.js
var ele = document.createElement('script');
ele.setAttribute('src','/static/chat.js');
document.getElementsByTagName('head')[0].appendChild(ele);
});
代碼拆分就是為了要實現按需加載所做的工作。想象一下，我們使用打包工具，將所有的js全部打包到了bundle.js這個文件，這種情況下是沒有辦法做到上面所述的按需加載的，因此，我們需要講按需加載的代碼在打包的過程中拆分出來，這就是代碼拆分。那么，對于這些資源，我們需要手動拆分么？當然不是，還是要借助打包工具。下面就來介紹webpack中的代碼拆分。
3. 代碼拆分
這里回到應用場景，介紹如何在webpack中進行代碼拆分。在webpack有多種方式來實現構建是的代碼拆分。
3.1 import()
這里的import不同于模塊引入時的import，可以理解為一個動態加載的模塊的函數(function-like)，傳入其中的參數就是相應的模塊。例如對于原有的模塊引入import react from 'react'可以寫為import('react')。但是需要注意的是，import()會返回一個Promise對象。因此，可以通過如下方式使用：
btn.addEventListener('click', e => {
// 在這里加載chat組件相關資源 chat.js
import('/components/chart').then(mod => {
someOperate(mod);
});
});
可以看到，使用方式非常簡單，和平時我們使用的Promise并沒有區別。當然，也可以再加入一些異常處理：
btn.addEventListener('click', e => {
import('/components/chart').then(mod => {
someOperate(mod);
}).catch(err ＝> {
console.log('failed');
});
});
當然，由于import()會返回一個Promise對象，因此要注意一些兼容性問題。解決這個問題也不困難，可以使用一些Promise的polyfill來實現兼容。可以看到，動態import()的方式不論在語意上還是語法使用上都是比較清晰簡潔的。
3.2 require.ensure()
在webpack 2的官網上寫了這么一句話：
require.ensure() is specific to webpack and superseded by import().
所以，在webpack 2里面應該是不建議使用require.ensure()這個方法的。但是目前該方法仍然有效，所以可以簡單介紹一下。包括在webpack 1中也是可以使用。下面是require.ensure()的語法：
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三個參數：
第一個參數
dependencies是一個數組，代表了當前require進來的模塊的一些依賴；第二個參數
callback就是一個回調函數。其中需要注意的是，這個回調函數有一個參數require，通過這個require就可以在回調函數內動態引入其他模塊。值得注意的是，雖然這個require是回調函數的參數，理論上可以換其他名稱，但是實際上是不能換的，否則webpack就無法靜態分析的時候處理它；第三個參數
errorCallback比較好理解，就是處理error的回調；第四個參數
chunkName則是指定打包的chunk名稱。
因此，require.ensure()具體的用法如下：
btn.addEventListener('click', e => {
require.ensure([], require => {
let chat = require('/components/chart');
someOperate(chat);
}, error => {
console.log('failed');
}, 'mychat');
});
3.3 Bundle Loader
除了使用上述兩種方法，還可以使用webpack的一些組件。例如使用Bundle Loader：
npm i --save bundle-loader
使用require("bundle-loader!./file.js")來進行相應chunk的加載。該方法會返回一個function，這個function接受一個回調函數作為參數。
let chatChunk = require("bundle-loader?lazy!./components/chat");
chatChunk(function(file) {
someOperate(file);
});
和其他loader類似，Bundle Loader也需要在webpack的配置文件中進行相應配置。Bundle-Loader的代碼也很簡短，如果閱讀一下可以發現，其實際上也是使用require.ensure()來實現的，通過給Bundle-Loader返回的函數中傳入相應的模塊處理回調函數即可在require.ensure()的中處理，代碼最后也列出了相應的輸出格式：
/*
Output format:
var cbs = [],
data;
module.exports = function(cb) {
if(cbs) cbs.push(cb);
else cb(data);
}
require.ensure([], function(require) {
data = require("xxx");
var callbacks = cbs;
cbs = null;
for(var i = 0, l = callbacks.length; i < l; i++) {
callbacks[i](data);
}
});
*/
4. react-router v4 中的代碼拆分
最后，回到實際的工作中，基于webpack，在react-router4中實現代碼拆分。react-router 4相較于react-router 3有了較大的變動。其中，在代碼拆分方面，react-router 4的使用方式也與react-router 3有了較大的差別。
在react-router 3中，可以使用Route組件中getComponent這個API來進行代碼拆分。getComponent是異步的，只有在路由匹配時才會調用。但是，在react-router 4中并沒有找到這個API，那么如何來進行代碼拆分呢？
在react-router 4官網上有一個代碼拆分的例子。其中，應用了Bundle Loader來進行按需加載與動態引入
import loadSomething from 'bundle-loader?lazy!./Something'
然而，在項目中使用類似的方式后，出現了這樣的警告：
Unexpected '!' in 'bundle-loader?lazy!./component/chat'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax
Search for the keywords to learn more about each error.
在webpack 2中已經不能使用import這樣的方式來引入loader了（no-webpack-loader-syntax）
Webpack allows specifying the loaders to use in the import source string using a special syntax like this:
var moduleWithOneLoader = require("my-loader!./my-awesome-module");
This syntax is non-standard, so it couples the code to Webpack. The recommended way to specify Webpack loader configuration is in a Webpack configuration file.
我的應用使用了create-react-app作為腳手架，屏蔽了webpack的一些配置。當然，也可以通過運行npm run eject使其暴露webpack等配置文件。然而，是否可以用其他方法呢？當然。
這里就可以使用之前說到的兩種方式來處理：import()或require.ensure()。
和官方實例類似，我們首先需要一個異步加載的包裝組件Bundle。Bundle的主要功能就是接收一個組件異步加載的方法，并返回相應的react組件：
export default class Bundle extends Component {
constructor(props) {
super(props);
this.state = {
mod: null
};
}
componentWillMount() {
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load(props) {
this.setState({
mod: null
});
props.load((mod) => {
this.setState({
mod: mod.default ? mod.default : mod
});
});
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
在原有的例子中，通過Bundle Loader來引入模塊：
import loadArticleDetail from 'bundle-loader?lazy!./functions/ArticleDetial'
const ArticleDetail = (props) => (
<Bundle load={ loadArticleDetail}>
{(ArticleDetail) => <About {...props}/>}
</Bundle>
)
注意： webpack 2 還是可以用Bundle Loader的
由于不再使用Bundle Loader，我們可以使用import()對該段代碼進行改寫：
const ArticleDetail = (props) => (
<Bundle load={ () => import('./functions/ArticleDetail')}>
{ (ArticleDetail) => <ArticleDetail {...props} /> }
</Bundle>
)
需要注意的是，由于import()會返回一個Promise對象，因此Bundle組件中的代碼也需要相應進行調整
export default class Bundle extends Component {
constructor(props) {
super(props);
this.state = {
mod: null
};
}
componentWillMount() {
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load(props) {
this.setState({
mod: null
});
//注意這里，使用Promise對象; mod.default導出默認
props.load().then((mod) => {
this.setState({
mod: mod.default ? mod.default : mod
});
});
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
路由部分沒有變化
<Route exact path="/post/:id" component={ArticleDetail}/>
這時候，執行npm run start，可以看到在載入最初的頁面時加載的資源如下
而當點擊觸發到/post路徑時，可以看到
動態加載了2.chunk.js這個js文件，如果打開這個文件查看，就可以發現這個就是我們剛才動態import()進來的模塊。
當然，除了使用import()仍然可以使用require.ensure()來進行模塊的異步加載。相關示例代碼如下：
const ArticleDetail = (props) => (
<Bundle load={ (cb) => {
require.ensure([],require=>{
cb(require('./function/ArticleDetail'))
});
}}>
{ (ArticleDetail) => <ArticleDetail {...props} /> }
</Bundle>
);
export default class Bundle extends Component {
constructor(props) {
super(props);
this.state = {
mod: null
};
}
load = props => {
this.setState({
mod: null
});
props.load(mod => {
this.setState({
mod: mod ? mod : null
});
});
}
componentWillMount() {
this.load(this.props);
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null
}
}
此外，如果是直接使用webpack config的話，也可以進行如下配置
output: {
// The build folder.
path: paths.appBuild,
// There will be one main bundle, and one file per asynchronous chunk.
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
},
5. 運用react-loadable庫
5.1 背景
當你的項目足夠大時，把所有代碼打包到一個bundle中的啟動時間就會成為問題。這時就需要把app拆分為若干個bundle，然后根據需求動態加載它們。
一個大bundle VS 若干個小bundle：
那如何把一個bundle拆成幾個呢？這個問題其實已經被 Browserify 和 Webpack 這些工具解決得很好了。
但還要做的是在項目中找到合適的地方拆分bundle，然后異步去加載。所以當項目中有東西在加載時的需要一種通信機制。
5.2 基于路由拆分 vs 基于組件拆分
通常的推薦做法就是把app根據路由進行拆分，然后異步地去加載每一個。看上去這種做法對于大多數app已經足夠好，例如點擊一個連接然后加載一個新頁面，這種體驗還不賴。
但是，我們可以做得更好。
其實在大多數React的路由管理工具中，路由以組件的形式存在。它們并沒有什么非常特別的地方。所以假設我們圍繞著組件優化而不是把責任推給路由會怎么樣？這樣會給我們帶來什么？
基于路由 VS 基于組件代碼拆分：
這會有很多結果。相比只是簡單根據路由拆分app，這樣做會有更多地方可以拆分。例如 Modals、tabs ，還有很多在用戶做相應操作之前隱藏內容的組件。
更別說那些需要推遲到高優先級內容加載完成后才加載的內容了。一個在頁面底部而且依賴了一大串類庫的組件為什么要和頁面頂部的內容同時加載呢？
你大可依然在路由只是簡單組件時拆分他們。對于你的app，不管黑貓白貓，捉到老鼠就是好貓。
但我們需要在讓組件層面拆分app像在路由層面拆分一樣簡單。簡單得只要改幾行代碼，其他的事就自動OK。
5.3 React Loadable簡介
React Loadable 是一個很小的庫，是作者thejameskyle厭煩了你們總說這個很難做 之后寫出來的。
Loadable 是一個高階組件（創建組件的function）用來輕易地在組件層面拆分bundle。
我們試想一下有兩個組件，其中一個引入并渲染了另一個。
import AnotherComponent from './another-component';
class MyComponent extends React.Component {
render() {
return <AnotherComponent/>;
}
}
此時我們依賴了AnotherComponent并且通過import關鍵字同步引入。我們需要一種讓它異步加載的方法。
使用ECMA中動態引用（一個T39提案，目前stage3 ）的特性來修改我們的組件使之異步加載AnotherComponent。
此時我們依賴了AnotherComponent并且通過import關鍵字同步引入。我們需要一種讓它異步加載的方法。
使用ECMA中動態引用（一個T39提案，目前stage3 ）的特性來修改我們的組件使之異步加載AnotherComponent。
class MyComponent extends React.Component {
state = {
AnotherComponent: null
};
componentWillMount() {
import('./another-component').then(AnotherComponent => {
this.setState({ AnotherComponent });
});
}
render() {
let {AnotherComponent} = this.state;
if (!AnotherComponent) {
return <div>Loading...</div>;
} else {
return <AnotherComponent/>;
};
}
}
然而，這只是手動做法，并不適用大量其他各種各樣的場景。比如說當import()失敗的情況，以及服務端渲染的情況。
作為替代，你可以使用 Loadable 把問題抽象出來。Loadable的用法很簡單。你僅僅要做的就是把要加載的組件和當你加載組件時的“Loading”組件傳入一個方法中。
import Loadable from 'react-loadable';
function MyLoadingComponent() {
return <div>Loading...</div>;
}
const LoadableAnotherComponent = Loadable(
() => import('./another-component'),
MyLoadingComponent
);
class MyComponent extends React.Component {
render() {
return <LoadableAnotherComponent/>;
}
}
但是如果組件加載失敗怎么辦，我們還需要一個錯誤狀態提示。 為了讓你最大化控制要顯示的東西，錯誤提示只是簡單地作為LoadingComponent的一個prop傳入。
function MyLoadingComponent({ error }) {
if (error) {
return <div>Error!</div>;
} else {
return <div>Loading...</div>;
}
}
5.4 基于import()的自動代碼拆分
import()的牛X之處在于 Webpack 2 可以自動拆分代碼，不論你在何時加入新代碼，都不用做其他額外的工作。
這意味著你在使用 React Loadable 時，你可以通過切換 import() 位置來輕易試驗代碼拆分點，以便讓你的app達到最佳性能。你可以在這查看示例工程。或者查看 Webpack 2 文檔（提示：一些相關文檔在require.ensure() 一節中）
5.5 避免組件加載閃爍
有時組件加載非常快(<200ms)，這時加載中的樣式就會一閃而過。
有大量用戶研究表明，這樣會讓用戶感覺到比實際加載更長的等待時間。如果什么都不顯示的話，用戶會感覺更快。所以Loading組件需要接收一個pastDelay prop。
這樣你的Loading組件只在加載時間比設定delay時間長時才會顯示。
export default function MyLoadingComponent({ error, pastDelay }) {
if (error) {
return <div>Error!</div>;
} else if (pastDelay) {
return <div>Loading...</div>;
} else {
return null;
}
}
這個 delay 默認200ms，但你也可以給Loadable傳入第三個參數用來自定義這個值。
5.6
作為優化，你也可以在組件渲染之前對它進行預加載。舉個例子，當你需要在點擊按鈕時加載一個新組建，可能需要用戶hover在按鈕上時就預加載它。
Loadable 創建的組件向外暴露了一個用于預加載的靜態方法，具體如下：
let LoadableMyComponent = Loadable(
() => import('./another-component'),
MyLoadingComponent,
);
class MyComponent extends React.Component {
state = { showComponent: false };
onClick = () => {
this.setState({ showComponent: true });
};
onMouseOver = () => {
LoadableMyComponent.preload();
};
render() {
return (
<div>
<button onClick={this.onClick} onMouseOver={this.onMouseOver}>
Show loadable component
</button>
{this.state.showComponent && <LoadableMyComponent/>}
</div>
)
}
}
5.7 服務端渲染
Loadable 通過控制最后一個參數同樣支持服務端渲染。服務端運行時，通過傳入要動態加載模塊的絕對路徑來允許 Loadable 同步 reqire() 模塊。
import path from 'path';
const LoadableAnotherComponent = Loadable(
() => import('./another-component'),
MyLoadingComponent,
200,
path.join(__dirname, './another-component')
);
這意味著你的“異步加載”和“代碼拆分”模塊在服務端都是同步渲染。
此時在客戶端遇到的問題回來了。我們可以在服務端完整渲染應用，但在客戶端，我們同一時間只需要加載一個bunle。
設想一下如果我們能弄清楚服務端bundling進程中哪些bundle是我們所需的會怎樣？這樣我們就可以把這些bundle一下傳給客戶端并且帶上服務端渲染的確切狀態。
今天你其實離這個目標很近了。
因為我們在Loadable中掌握了所有server端依賴的路徑，我們可以添加一個新的flushServerSideRequires方法用來返回所有在服務端渲染的路徑。然后用webpack –json命令，我們就可以獲得一個匹配了對應文件的bundle（我的具體代碼）。
6. 結束
代碼拆分在單頁應用中非常常見，對于提高單頁應用的性能與體驗具有一定的幫助。我們通過將第一次訪問應用時，并不需要的模塊拆分出來，通過scipt標簽動態加載的原理，可以實現有效的代碼拆分。在實際項目中，使用webpack中的import()、require.ensure()或者一些loader（例如Bundle Loader）來做代碼拆分與組件按需加載。
后續打算弄一個腳手架出來
本項目地址: geekjc-antd-mobile
