實例詳解vue-cli優化的webpack配置-js教程-PHP中文網

最近的專案度過了開始忙碌的基礎建設期，也慢慢輕鬆下來，準備記錄自己最近webpack優化的措施，希望有溫故知新的效果。本文主要介紹了詳解基於vue-cli優化的webpack配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

專案採用的是vue全家桶，建置設定都是基於vue-cli去改進的。關於原始webpack設定大家可以看下這篇文章vue-cli#2.0 webpack設定分析,文章基本上對於檔案每行程式碼都做了詳細的解釋，有助於更好的理解webpack。

仔細總結了一下，自己的最佳化基本上還是網路上流傳的那幾點

透過externals 設定來擷取常用函式庫，引用cdn
合理設定CommonsChunkPlugin
善用alias
dllplugin啟用預先編譯

happypack多核心建置專案

externals

文件位址https://doc.webpack-china.org /configuration/externals/

防止將某些import 的套件(package)打包到bundle 中，而是在執行時間(runtime)再去從外部取得這些擴充依賴(external dependencies)。

CommonsChunkPlugin

文件網址https://doc.webpack-china.org/plugins/commons-chunk-plugin/
CommonsChunkPlugin 插件，是一個可選的用於建立一個獨立檔案(又稱作chunk)的功能，這個檔案包括多個入口chunk 的公共模組。透過將公共模組拆出來，最終合成的檔案能夠在最開始的時候載入一次，便存起來到快取中供後續使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的程式碼從快取中取出來，而不是每次造訪一個新頁面時，再去加載一個更大的檔案。

resolve.alias

文件位址https://doc.webpack-china.org/configuration/resolve/#resolve-alias

建立import 或require 的別名，來確保模組引入變得更簡單。例如，一些位於 src/ 資料夾下的常用模組：不過經過自己的實作最後三點是對自己專案優化最大的。文章也主要對後面幾點詳細說明一下

原來打包一個專案所需的時間基本上在40秒左右，那再經過後面三步驟優化大概要多久呢

1.使用dllplugin預編譯與引用

首先為什麼要引用Dll？在網路上瀏覽了一些文章後，我發現上除了加快建置速度以外，使用webpack的dll還有一個好處。

Dll打包以後是獨立存在的，只要其包含的函式庫沒有增減、升級，hash也不會變化，因此線上的dll程式碼不需要隨著版本發布頻繁更新。因為使用Dll打包的基本上都是獨立函式庫文件，這類文件有一個特性就是變化不大。當我們正常打包這些函式庫檔案到一個app.js裡的時候，由於其他業務檔案的改變，影響了快取對建置的最佳化，導致每次都要重新去npm套件裡尋找相關檔案。而使用了DLL之後，只要包含的函式庫沒有升級，增減，就不需要重新打包。這樣也提高了建置速度。

那麼如何使用Dll去優化專案呢

首先要建立一個dll的設定檔,引入專案所需的第三方程式庫。這類庫的特點是不需要隨著版本發布頻繁更新，長期穩定。

const webpack = require(&#39;webpack&#39;);
const path = require(&#39;path&#39;);

module.exports = {
 entry: {
  //你需要引入的第三方库文件
  vendor: [&#39;vue&#39;,&#39;vuex&#39;,&#39;vue-router&#39;,&#39;element-ui&#39;,&#39;axios&#39;,&#39;echarts/lib/echarts&#39;,&#39;echarts/lib/chart/bar&#39;,&#39;echarts/lib/chart/line&#39;,&#39;echarts/lib/chart/pie&#39;,
   &#39;echarts/lib/component/tooltip&#39;,&#39;echarts/lib/component/title&#39;,&#39;echarts/lib/component/legend&#39;,&#39;echarts/lib/component/dataZoom&#39;,&#39;echarts/lib/component/toolbox&#39;],
 },

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

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

登入後複製

基本設定參數和webpack基本上一模一樣，相信來看優化的都明白什麼意思，我就不解釋了。然後執行程式碼編譯檔。 (我的設定檔是放在build裡面，下方路徑依專案路徑需要變動)

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

登入後複製

當執行完執行後，會產生兩個新檔案在目錄同等級，一個是產生在dist資料夾下的verdor.js，裡面是剛剛入口依賴被壓縮後的程式碼;一個是dll資料夾下的verdor-manifest.json，將每個函式庫進行了編號索引，並且使用的是id而不是name。

接下去你只要去你的webpack設定檔的里的plugin中加入一行程式碼就ok了。

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

登入後複製

這時候再執行webpack指令，可以發現時間直接從40秒銳減到了20s左右，整整快了一倍有木有(不知道是不是因為自己依賴庫太多了才這樣的，手動摀臉)。

2.happypack多執行緒編譯

######一般node.js是單執行緒執行編譯，而happypack則是啟動node的多執行緒進行構建，大大提高了構建速度。使用方法也比較簡單。以我專案為例,在插件中new一個新的happypack進程出來，然後再使用使用loader的地方替換成對應的id############

var HappyPack = require(&#39;happypack&#39;);
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ &#39;happypack/loader?id=happybabel&#39;],
      include: [resolve(&#39;src&#39;)]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。
  new HappyPack({
     id: &#39;happybabel&#39;,
     loaders: [&#39;babel-loader&#39;],
     threads: 4,//HappyPack 使用多少子进程来进行编译
  }),
  new HappyPack({
     id: &#39;scss&#39;,
     threads: 4,
     loaders: [
        &#39;style-loader&#39;,
        &#39;css-loader&#39;,
        &#39;sass-loader&#39;,
     ],
  })
]

登入後複製

这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。

3.善用alias

3.配合resolve，善用alias

本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。

vue-cli配置文件中提示也有提到这一点，就是下面这段代码

resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,//就是这行代码，提供你直接引用文件
   &#39;@&#39;: resolve(&#39;src&#39;),
  }
 },

登入後複製

然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如

// import &#39;vue&#39;;
import &#39;vue/dist/vue.esm.js&#39;;

登入後複製

时间竟然到了12s，也是把我吓了一跳。。。

然后我就把jquery，axios，vuex等等全部给替换掉了。。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~

4.webpack3升级

本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件

// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

登入後複製

不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样

好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。