webpack優化不完全指南

最基本的乙個webpack配置

const webpack = require('webpack');
const htmlwebpackplugin = require('html-webpack-plugin');
const extracttextplugin = require('extract-text-webpack-plugin');
module.exports = ,
devtool: 'none',
devserver: ,
module: 
}, }, ],})}
}]
},plugins: [
new webpack.bannerplugin(),
new htmlwebpackplugin(),
new webpack.optimize.occurrenceorderplugin(),
new webpack.optimize.uglifyjsplugin(),
new extracttextplugin("style.css")
]};

接下來基於這份配置進行乙個優化:

首先我們得區分開發環境、生產環境以及測試環境(這個在國內用的公司少)實現思路(參考vue-cil)，通用配置可以設定乙個base檔案然後exports，在其他的配置檔案中require進來。

上面這個配置中new webpack.optimize.uglifyjsplugin()就可以放入webpack.prod.conf.js中，因為**壓縮醜化只需要在生產環境中使用，在開發過程開啟的話，不僅編譯時間加長還不利於除錯。

module與entry、output這個就可以放到webpack.base.cong.js檔案中，這些配置是通用的不管在生產環境還是開發環境中都是用得到的。

devserver則是在開發過程中需要啟動乙個伺服器然後再開啟熱替換功能。

include: [resolve('src'), resolve('test')]

這樣loader載入器就只會匹配src/與/test目錄下的檔案，至於node_modules目錄下的檔案則跳過，假如沒加這一限制條件的話，node_modules下那麼多的js檔案，想想都覺得恐怖，並且別人發布出來的包檔案一般都是經過babel轉成es5標準的。

alias:

這樣當webpack遇到import('@***')的時候就會直接在src/目錄下去尋找，能節省不少的目錄查詢時間

多頁面優化

當我們的專案是多個頁面的時候，我們需要用到htmlwebpackplugin外掛程式，

for(let i = 0; i< html.length; i++) ,
chunkssortmode: 'dependency',
chunks: ['manifest', 'vendor', cur]
})))}

有多少個頁面就push多少個htmlwebpackplugin進去，至於頁面的獲取我們可以通過walk-sync來做到，通過獲取目錄下的入口檔案來判斷有多少個頁面存在。

我在優化過程中遇到個坑，當webpack從2.x公升級為3.x的時候，

compilation.getstats().tojson()

這個函式的執行時間會大大加長，我看到其實在issue裡頭有人提出來了，不過作者並沒有給合併到master中去。還有點就是：當頁面是多頁面的時候每一次小的改動都會把所有的html檔案重新生成一次，針對這兩個優化我在githubfork了下html-webpack-plugin，並發布了html-webpack-plugin-multihtml。我們的專案一共是有49個頁面之前rebuild是花費5-7s ，優化後保持在1s左右。

提取公共**commonschunkplugin

有些類庫如utils, bootstrap之類的可能被多個頁面共享，最好是可以合併成乙個js，而非每個js單獨去引用。這樣能夠節省一些空間。這時我們可以用到commonschunkplugin，我們指定好生成檔案的名字，以及想抽取哪些入口js檔案的公共**，webpack就會自動幫我們合併好。

new webpack.optimize.commonschunkplugin(
}),

這個是針對多頁面優化的，commonschunkplugin會自己計算當乙個類庫被引用的次數超過8次，就把它打包至vendor中，這樣就不必全打包至乙個index.js裡頭

externals提取常用庫

externals 配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所建立的 bundle 依賴於那些存在於使用者環境(consumer's environment)中的依賴。

externals主要是防止將某些import的包打包到bundle中，而是在執行時(runtime)再去從外部獲取這些擴充套件依賴

配置也挺簡單的接下來貼下**：

index.html中引入

webpack.config.js中配置

externals:

這樣就能在**中通過import引用了：

import $ from 'jquery';

uglifyplugin多執行緒壓縮**

在webpack的預設情況下，都是單執行緒跑的，有個叫webpack-uglify-parallel的外掛程式，它能夠充分呼叫計算機的資源，利用計算機的多核特性進行**壓縮。

使用方法也挺簡單的，把之前webpack.prod.conf.js中的

new webpack.optimize.uglifyjsplugin(,
comments: false
}),

替換為

var os = require('os');
var uglifyjsparallelplugin = require('webpack-uglify-parallel');
module.exports = )
]}

即可github位址：webpack-uglify-parallel

// 省略其餘配置

module: ]},

plugins: [

id: 'less',

loaders: ['css!less'],

cache: true,

verbose: true

})]

我在優化我們專案的webpack遇到了兩個坑，乙個就是上面提到的，webpack2公升級3編譯時間增多，另乙個就是devserver在低版本安卓機型上跑步起來。devserver這個使用"webpack-dev-server": "2.7.1"即可，因為2.9.x版本使用的是es6的寫法安卓4.1以下不支援，ie9以下也不支援。

webpack優化不完全指南

SVN不完全指南介紹

不完全型別

不完全型別

webpack優化不完全指南

SVN不完全指南 介紹

不完全型別

不完全型別

相關推薦

SVN不完全指南介紹