如何讓webpack打包的速度提高50%？

隨着前端應用包含的模塊數量日益增加，代碼打包的耗時也愈來愈長。公司不少項目打包耗時超過了10秒，對於通常人來講超過10秒的等待是比較難受的，雖而後續增量編輯的速度很快。因而我想結合實際開發環境提高一下首次打包的速度。

1. 實際開發環境

我碰到大多數處於維護狀態的網站都有一下幾個特性：

• 模塊數量龐大
• 模塊中主要分爲js模塊和css模塊，而且less模塊最後使用extract-text-webpack-plugin打包出單獨的css文件
• webpack入口文件包含了js和less，因此每次打包都須要處理js和less模塊
• 許多需求只涉及到js模塊的修改，並不涉及樣式修改。反之亦然。

2. 優化思路

既然許多狀況下編譯less模塊不是必須的，那在這些狀況下單獨編譯js模塊就能大幅提高webpack的性能。畢竟less的編譯、以及css的抽出都很是消耗時間。

3. 優化步驟

優化包含如下兩步：

• 區分編譯目標，單獨編譯js? 仍是單獨編輯css？ 仍是js+css?
• 入口文件分離js和css

3.1 區分編譯目標

這一步比較簡單，咱們須要使用cross-env這個插件，例以下面兩條編譯命令區分了編譯js和編譯js+css。

{
	"scripts": {
	    "build:js": "cross-env ctarget=all webpack",
	    "biuld:js+css": "cross-env ctarget=js webpack"
  }
}
複製代碼

這樣咱們就能夠在webpack配置文件中經過process.env.ctarget區分當前編譯目標了。

3.2 分離js和css

這一步須要經過webpack的loader來實現，可使用現有的輪子string-replace-loader。

這個loader能夠在編譯階段修改代碼，而且可使用正則表達式進行替換。可使用它來加載js文件，而後刪除部分代碼。下面的例子的做用是刪除js文件中全部的less代碼導入。

{
	module: {
		rules: [
			{
            test: /.js$/,
            use: (function(){
                var list = ['這裏能夠加上其餘須要的loader']; 
                // 更具編譯目標刪除less的導入
                if (process.env.ctarget === 'js') {
                    list.push({
                        loader: 'string-replace-loader',
                        options: {
                            search: '^.+?require\\(.+(\\.less).+$',
                            replace: '',
                            flags: 'm'
                        }
                    })
                }
                return list;
            })()
        }
		]
	}
}
複製代碼

這裏在使用string-replace-loader必定要加上flags: 'm'，不然沒法進行多行匹配。

若是要單獨打包css咱們能夠寫一個和string-replace-loader做用相反的loader，只保留樣式部分而刪除其餘js代碼。

4. 效果

通過實際測試，這個優化能夠節省50%的時間。固然具體到每個項目還要看js和css模塊數量的比例。