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

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

項(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模塊可以省略不寫(xiě)后綴名
  extensions: ['.js', '.vue', '.json'],
  //模塊別名定義，方便后續(xù)直接引用別名，無(wú)須多寫(xiě)長(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í)間也可以了。

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

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

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

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

廣告

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