vue-cli如何優(yōu)化webpack配置-創(chuàng)新互聯(lián)

小編給大家分享一下vue-cli如何優(yōu)化webpack配置，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

十年的林州網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整林州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“林州網(wǎng)站設(shè)計”,“林州網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

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

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

通過 externals 配置來提取常用庫，引用cdn
合理配置CommonsChunkPlugin
善用alias
dllplugin啟用預(yù)編譯
happypack多核構(gòu)建項目

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

resolve.alias

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

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

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

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

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

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

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

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

首先要建立一個dll的配置文件,引入項目所需要的第三方庫。這類庫的特點是不需要隨著版本發(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ù)項目路徑需要變動)

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

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

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

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

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

2.happypack多線程編譯

一般node.js是單線程執(zhí)行編譯，而happypack則是啟動node的多線程進行構(gòu)建，大大提高了構(gòu)建速度。使用方法也比較簡單。以我項目為例,在插件中new一個新的happypack進程出來，然后再使用使用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 支持度有限，會有報錯，有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子進程來進行編譯
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

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

3.善用alias

3.配合resolve，善用alias

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

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

resolve: {
  //自動擴展文件后綴名，意味著我們require模塊可以省略不寫后綴名
  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';

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

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

4.webpack3升級

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

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

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

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

以上是“vue-cli如何優(yōu)化webpack配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標題：vue-cli如何優(yōu)化webpack配置-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article10/dsghdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站維護、網(wǎng)站設(shè)計、域名注冊、面包屑導航、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容