最近的項(xiàng)目度過(guò)了開(kāi)始忙碌的基建期，也慢慢輕松下來(lái)，準(zhǔn)備記錄一下自己最近webpack優(yōu)化的措施，希望有溫故知新的效果。

項(xiàng)目采用的是vue全家桶，構(gòu)建配置都是基于vue-cli去改進(jìn)的。關(guān)于原始webpack配置大家可以看下這篇文章vue-cli#2.0 webpack配置分析,文章基本對(duì)于文件每行代碼都做了詳細(xì)的解釋，有助于更好的理解webpack。

仔細(xì)總結(jié)了一下，自己的優(yōu)化基本還是網(wǎng)上流傳的那幾點(diǎn)

1. 通過(guò) externals 配置來(lái)提取常用庫(kù)，引用cdn
2. 合理配置CommonsChunkPlugin
3. 善用alias
4. dllplugin啟用預(yù)編譯
5. happypack多核構(gòu)建項(xiàng)目

externals

文檔地址 https://doc.webpack-china.org/configuration/externals/

防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。

CommonsChunkPlugin

文檔地址https://doc.webpack-china.org/plugins/commons-chunk-plugin/

CommonsChunkPlugin 插件，是一個(gè)可選的用于建立一個(gè)獨(dú)立文件(又稱作 chunk)的功能，這個(gè)文件包括多個(gè)入口 chunk 的公共模塊。通過(guò)將公共模塊拆出來(lái)，最終合成的文件能夠在最開(kāi)始的時(shí)候加載一次，便存起來(lái)到緩存中供后續(xù)使用。這個(gè)帶來(lái)速度上的提升，因?yàn)闉g覽器會(huì)迅速將公共的代碼從緩存中取出來(lái)，而不是每次訪問(wèn)一個(gè)新頁(yè)面時(shí)，再去加載一個(gè)更大的文件。

resolve.alias

文檔地址 https://doc.webpack-china.org/configuration/resolve/#resolve-alias

創(chuàng)建 import 或 require 的別名，來(lái)確保模塊引入變得更簡(jiǎn)單。例如，一些位于 src/ 文件夾下的常用模塊：

不過(guò)經(jīng)過(guò)自己的實(shí)踐最后三點(diǎn)是對(duì)自己項(xiàng)目?jī)?yōu)化最大的。文章也主要對(duì)后面幾點(diǎn)詳細(xì)說(shuō)明一下

原來(lái)打包一個(gè)項(xiàng)目所需要的時(shí)間基本在40秒左右，那再經(jīng)過(guò)后面三步優(yōu)化大概要多久呢

1.使用dllplugin預(yù)編譯與引用

首先為什么要引用Dll？在網(wǎng)上瀏覽了一些文章后，我發(fā)現(xiàn)上除了加快構(gòu)建速度以外，使用webpack的dll還有一個(gè)好處。

Dll打包以后是獨(dú)立存在的，只要其包含的庫(kù)沒(méi)有增減、升級(jí)，hash也不會(huì)變化，因此線上的dll代碼不需要隨著版本發(fā)布頻繁更新。 因?yàn)槭褂肈ll打包的基本上都是獨(dú)立庫(kù)文件，這類文件有一個(gè)特性就是變化不大。當(dāng)我們正常打包這些庫(kù)文件到一個(gè)app.js里的時(shí)候，由于其他業(yè)務(wù)文件的改變，影響了緩存對(duì)構(gòu)建的優(yōu)化，導(dǎo)致每次都要重新去npm包里尋找相關(guān)文件。而使用了DLL之后，只要包含的庫(kù)沒(méi)有升級(jí)， 增減，就不需要重新打包。這樣也提高了構(gòu)建速度。

那么如何使用Dll去優(yōu)化項(xiàng)目呢

首先要建立一個(gè)dll的配置文件,引入項(xiàng)目所需要的第三方庫(kù)。這類庫(kù)的特點(diǎn)是不需要隨著版本發(fā)布頻繁更新，長(zhǎng)期穩(wěn)定。

const webpack = require('webpack');
const path = require('path');

module.exports = {
 entry: {
  //你需要引入的第三方庫(kù)文件
  vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie',
   'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'],
 },

 output: {
  path: path.join(__dirname, 'dist-[hash]'),
  filename: '[name].js',
  library: '[name]',
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dll', '[name]-manifest.json'),
   filename: '[name].js',
   name: '[name]',
  }),
 ]
};

基本配置參數(shù)和webpack基本一模一樣，相信來(lái)看優(yōu)化的都明白什么意思，我就不解釋了。然后執(zhí)行代碼編譯文件。(我的配置文件是放在build里面，下方路徑根據(jù)項(xiàng)目路徑需要變動(dòng))

webpack -p --progress --config build/webpack.dll.config.js

當(dāng)運(yùn)行完執(zhí)行后，會(huì)生成兩個(gè)新文件在目錄同級(jí)，一個(gè)是生成在dist文件夾下的verdor.js，里面是剛剛?cè)肟谝蕾嚤粔嚎s后的代碼;一個(gè)是dll文件夾下的verdor-manifest.json，將每個(gè)庫(kù)進(jìn)行了編號(hào)索引，并且使用的是id而不是name。

接下去你只要去你的webpack配置文件的里的plugin中添加一行代碼就ok了。

const manifest = require('./dll/vendor-manifest.json');
...
...,
plugin:[
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest,
  }),
]

這時(shí)候再執(zhí)行webpack命令，可以發(fā)現(xiàn)時(shí)間直接從40秒銳減到了20s左右，整整快了一倍有木有(不知道是不是因?yàn)樽约阂蕾噹?kù)太多了才這樣的，手動(dòng)捂臉)。

2.happypack多線程編譯

一般node.js是單線程執(zhí)行編譯，而happypack則是啟動(dòng)node的多線程進(jìn)行構(gòu)建，大大提高了構(gòu)建速度。使用方法也比較簡(jiǎn)單。以我項(xiàng)目為例,在插件中new一個(gè)新的happypack進(jìn)程出來(lái)，然后再使用使用loader的地方替換成對(duì)應(yīng)的id

var HappyPack = require('happypack');
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ 'happypack/loader?id=happybabel'],
      include: [resolve('src')]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack對(duì)對(duì) url-loader,vue-loader 和 file-loader 支持度有限，會(huì)有報(bào)錯(cuò)，有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子進(jìn)程來(lái)進(jìn)行編譯
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

這時(shí)候再去執(zhí)行編譯webpack的代碼，打印出來(lái)的console則變成了另外一種提示。而編譯時(shí)間大概從20s優(yōu)化到了15s左右(感覺(jué)好像沒(méi)有網(wǎng)上說(shuō)的那么大，不知道是不是因?yàn)楸旧韏s比重占據(jù)太大的緣故)。

3.善用alias

3.配合resolve，善用alias

本來(lái)是沒(méi)有第三點(diǎn)的，只不過(guò)在搜索網(wǎng)上webpack優(yōu)化相關(guān)文章的時(shí)候，看到用人提到把引入文件改成庫(kù)提供的文件(原理我理解其實(shí)就是1.先通過(guò)resolve指定文件尋找位置，減小搜索范圍；2.直接根據(jù)alias找到庫(kù)提供的文件位置)。

vue-cli配置文件中提示也有提到這一點(diǎn)，就是下面這段代碼

resolve: {
  //自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名
  extensions: ['.js', '.vue', '.json'],
  //模塊別名定義，方便后續(xù)直接引用別名，無(wú)須多寫長(zhǎng)長(zhǎng)的地址
  alias: {
   'vue$': 'vue/dist/vue.esm.js',//就是這行代碼，提供你直接引用文件
   '@': resolve('src'),
  }
 },

然后我將其他所有地方關(guān)于vue的引用都替換成了vue$之后，比如

// import 'vue';
import 'vue/dist/vue.esm.js';

時(shí)間竟然到了12s，也是把我嚇了一跳。。。

然后我就把jquery，axios，vuex等等全部給替換掉了。。。大概優(yōu)化到了9s左右，美滋滋，O(∩_∩)O~~

4.webpack3升級(jí)

本來(lái)是沒(méi)第四點(diǎn)，剛剛看到公眾號(hào)推出來(lái)一篇文章講到升級(jí)到webpack3的一些新優(yōu)點(diǎn)，比如Scope Hoisting(webpack2升級(jí)到webpack3基本上沒(méi)有太大問(wèn)題)。通過(guò)添加一個(gè)新的插件

// 2017-08-13配合最新升級(jí)的webpack3提供的新功能，可以使壓縮的代碼更小，運(yùn)行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

不過(guò)在添加這行代碼之后，構(gòu)建時(shí)間并沒(méi)有太大變化，不過(guò)運(yùn)行效率沒(méi)試過(guò)，不知道新的效果怎么樣

好了基本上感覺(jué)就是以上這些效果對(duì)項(xiàng)目的優(yōu)化最大，雖然沒(méi)有到網(wǎng)上說(shuō)的那種只要3~4秒時(shí)間那么變態(tài)，不過(guò)感覺(jué)基本8,9秒的時(shí)間也可以了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論