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

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

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

1. 通過 externals 配置來提取常用庫，引用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 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時(shí)候加載一次，便存起來到緩存中供后續(xù)使用。這個(gè)帶來速度上的提升，因?yàn)闉g覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個(gè)新頁面時(shí)，再去加載一個(gè)更大的文件。

resolve.alias

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

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

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

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

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

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

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

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

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

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

module.exports = {
 entry: {
  //你需要引入的第三方庫文件
  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基本一模一樣，相信來看優(yōu)化的都明白什么意思，我就不解釋了。然后執(zhí)行代碼編譯文件。(我的配置文件是放在build里面，下方路徑根據(jù)項(xiàng)目路徑需要變動)

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

當(dāng)運(yùn)行完執(zhí)行后，會生成兩個(gè)新文件在目錄同級，一個(gè)是生成在dist文件夾下的verdor.js，里面是剛剛?cè)肟谝蕾嚤粔嚎s后的代碼;一個(gè)是dll文件夾下的verdor-manifest.json，將每個(gè)庫進(jìn)行了編號索引，并且使用的是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)樽约阂蕾噹焯嗔瞬胚@樣的，手動捂臉)。

2.happypack多線程編譯

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

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

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

3.善用alias

3.配合resolve，善用alias

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

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

resolve: {
  //自動擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名
  extensions: ['.js', '.vue', '.json'],
  //模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址
  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升級

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

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

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

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

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

最新評論