webpack之代碼拆分

做爲當前風頭正盛的打包工具，webpack風靡前端界。確實做爲引領了一個時代的打包工具，不少方面都帶來了顛覆性的改進，讓咱們更加的感覺到自動化的快感。不過最爲你們詬病的一點就是用起來太難了。
要想愉快的使用，要使用n多的配置項，究其緣由在於文檔的不夠詳細、自己默認集成的不足。
也不能說這是缺點吧，更多的主動權放給用戶就意味着配置工做量的增長，這裏就不過多探討了。
當歷盡千辛萬苦，你的項目跑起來以後，可能會發現有一些不太美好的問題的出現，編譯慢、打包文件大等。那麼，咱們還要花些時間來看看怎麼優化相關配置了。 下面一塊兒看下code splitting

code splitting出現的背景

對於前端資源來講，文件體積過大是很影響性能的一項。特別是對於移動端的設備而言簡直是災難。
此外對於某些只要特定環境下才須要的代碼，一開始就加載進來顯然也不那麼合理，這就引出了按需加載的概念了。

爲了解決這些狀況，代碼拆分就應運而生了。代碼拆分故名思意就是將大的文件按不一樣粒度拆分，以知足解決生成文件體積過大、按需加載等需求。
具體到webpack而言有下面幾種方式來達到咱們的目的。

webpack實現代碼拆分的方式

webpack經過下面三種方式來達到以上目的

1. Entry Points: 多入口分開打包
2. Prevent Duplication:去重，抽離公共模塊和第三方庫
3. Dynamic Imports:動態加載 這裏不去扒文檔上的定義了，咱們從一個例子中來逐步體會他們不一樣的做用。

假設咱們有這麼個項目，有下面幾個文件

代碼很簡單(示例而已，直接用commonjs的語法來寫了):

//a.js
var react = require('react')
var tool = require('./tool')
var b = require('./b')
function load(){
    b()
    tool()
    console.log('所有文件都從一個入口打包')
}
load()
//b.js
var react = require('react')
var tool = require('./tool')
function b(){
    tool()
    console.log('這是bjs文件')
}
module.exports = b;
//tool.js
var react = require('react')
function tool(){
    console.log('這是tooljs文件')
}
module.exports = tool;
複製代碼

配置很簡單:

var webpack = require('webpack');module.exports = {
    entry: './codesplitting/c1/a.js',
    output: {
        path: __dirname,
        filename: '/dist/index.js'
    }
    //*****
}
複製代碼

直接打包：能夠看到文件大小有2047行,體積也變大了

目前只引入了react，而且業務代碼幾乎沒有的狀況下。你們能夠猜到實際項目中的狀況了。來讓咱們進行第一優化

Entry Points

若是業務中的項目不是單頁面應用，這一步能夠忽略了，直接是多入口打包。這裏是爲了演示效果，強行分一個模塊出來打包，假設咱們的文件也很大，須要將b.js單獨打個包出來:

entry: {
        index:'./codesplitting/c1/a.js',
        other:'./codesplitting/c1/b.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js'
    }，
    //***
複製代碼

這裏a.js也須要修改,去掉對b的引用。入口文件之間不能相互引用的。否則，問題就大了，到底以誰爲主呢，這樣就陷入了循環引用的問題。 此時的生成文件以下:

看來文件居然只小了那麼一點了吧？第一步的優化這裏就完成了，顯然你會認爲我在開玩笑。
固然這只是萬里長征第一步，看一下dist下的文件不難發現兩個文件中都把react這個第三方庫和tool.js這個可複用模塊打進去了，顯然這樣重複打包有點不必。
是否是能夠把這些複用性強的模塊拿出來單獨打包呢？
這樣瀏覽器第一次請求以後就會將該文件緩存起來，從服務端請求的只有體積縮小以後的業務文件了，這樣的話加載速度顯然會有所提高。
若是你也是這麼想的，來一塊兒繼續看下去。

Prevent Duplication

webpack去除重複引用是經過CommonsChunkPlugin插件來實現的。該插件的配置項以下：

{
    //被抽離爲公共文件的chunk名，例如common,能夠是string或者數組
    //顯然若是是單個的模塊，就是name多個就是names
    name:string,
    names:[],
    //打包以後公共模塊的名稱模板
    //例如'[name].js'
    //若是省略，則和name名稱一致
    filename:string,
     //模塊被引的最小次數，也就是說至少有幾個組件引用了該模塊。
    //若是是Infinity，則代表單純的建立，並不作任何事情
    minChunks:2  
}
複製代碼

具體在webpack中去重對於第三方庫顯示聲明vendor，公共模塊聲明common的方式來處理

entry: {
        index:'./codesplitting/c1/a.js',
        other:'./codesplitting/c1/b.js',
        //第三方庫顯示聲明
        vendor:['react'],
        //公共組件聲明爲common
        common:['./codesplitting/c1/tool']
    },
    //***
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names:["common", "vendor"],
            filename: "[name].js"
        })  
    ]
複製代碼

打包結果以下：

能夠看到index和other兩個業務包已經很小了，react被抽離到單獨的包中。
這樣還有一個問題，對於某些代碼可能只有在特定條件下才執行，或者可能就不執行。
我不但願在首屏就去加載它，也就是咱們常說的按需加載是要怎麼作呢。一塊兒看下去。

Dynamic Imports

webpack建議以下兩種方式使用動態加載。

1)、ECMAScript中出於提案狀態的import()

2)、webpack 特定的 require.ensure

咱們這裏就是用第二種來看下效果(畢竟偷懶沒用babel...),在ajs中動態引入di.js

//雖然始終會加載,你們能明白就行
    if(true){
        require.ensure([],function(require){
            var di = require('./di')
        })
    }
    //新增動態加載的js
    function di(){
        tool()
        console.log('這是動態引入的文件')
    }
    module.exports = di;
複製代碼

運行以後能夠發現多了個2.2.js,打開能夠發現就是咱們新建的動態引入的di.js

你們可能會問怎麼肯定就是動態引入的呢，雖然本示例只能看打包以後的例子(就不引入dev server了，畢竟是懶。。。)咱們依然能夠從代碼裏看到結果。 首先、查看index.js文件，能夠看到下面的代碼：

var react = __webpack_require__(2)
	   var tool = __webpack_require__(1)  
	   /****省略8*****/
      //雖然始終會加載
	    if(true){
	        __webpack_require__.e/* nsure */(2, function(require){
	            var di = __webpack_require__(13)
	        })
	    }
複製代碼

與直接require的模塊不一樣,require.ensure被轉化爲了 webpack_require.e方法，來繼續看一下該方法有什麼用。

__webpack_require__.e = function requireEnsure(chunkId, callback) {
		// "0" is the signal for "already loaded"
		if(installedChunks[chunkId] === 0)
			return callback.call(null, __webpack_require__);

		// an array means "currently loading".
		if(installedChunks[chunkId] !== undefined) {
			installedChunks[chunkId].push(callback);
		} else {
			// start chunk loading
			installedChunks[chunkId] = [callback];
			var head = document.getElementsByTagName('head')[0];
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.charset = 'utf-8';
			script.async = true;

			script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"common","1":"index","3":"other"}[chunkId]||chunkId) + ".js";
			head.appendChild(script);
		}
	};
複製代碼

結合註釋直接從源碼中能夠看出來，最後面的條件語句來建立script標籤進而實現動態加載的。所謂動態加載本質仍是要建立script標籤來實現的。

結束語

至此代碼分割部分的優化已經完成了，以上是我的關於代碼分割的簡單理解，拋磚引玉，共同窗習進步。更多請移步github查看