日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
一行可以讓項(xiàng)目啟動(dòng)快70%以上的代碼

 前言

這兩天閑來(lái)無(wú)事，想優(yōu)化優(yōu)化項(xiàng)目的啟動(dòng)時(shí)間，用了一個(gè)下午吧，將項(xiàng)目啟動(dòng)時(shí)間從48秒優(yōu)化到14秒，大約70左右，效果還是有的，而且僅僅用了一行代碼。

從事光華機(jī)房服務(wù)器托管，服務(wù)器租用，云主機(jī)，網(wǎng)頁(yè)空間，國(guó)際域名空間，CDN，網(wǎng)絡(luò)代維等服務(wù)。

會(huì)講一下找到這行代碼的過(guò)程，如果沒(méi)有耐心可以直接跳轉(zhuǎn)到文章底部，直接看結(jié)論即可。

項(xiàng)目背景

項(xiàng)目就是簡(jiǎn)單的Vue項(xiàng)目，不過(guò)公司內(nèi)部給vue-cli包了一層，不過(guò)影響不大。

別的也就沒(méi)啥了，正常的H5網(wǎng)頁(yè)，用的插件也不算多，為了控制項(xiàng)目體積。

項(xiàng)目分析

既然決定要優(yōu)化了，首先要分析下項(xiàng)目，先用speed-measure-webpack-plugin和webpack-bundle-analyzer分析下，具體的配置這里就不多說(shuō)了，很簡(jiǎn)單，網(wǎng)上一搜一大堆，這里直接看看結(jié)論。

首先是項(xiàng)目運(yùn)行時(shí)間：

可以看到，基本上耗時(shí)大戶就是eslint-loader和vue-loader了，二者一個(gè)耗時(shí)40多秒，一個(gè)耗時(shí)30多秒，非常的占用資源。

接下來(lái)再看看具體的包分析

這一看就很一下子定位到問(wèn)題到根源了，右側(cè)的chunk-vendors不用看，只看左側(cè)的chunk-page，這里面的頁(yè)面數(shù)量太多了，相應(yīng)的文件也很多，這也就直接導(dǎo)致了eslint-loader和vue-loader耗時(shí)很久了，這么多文件，一個(gè)個(gè)檢查耗時(shí)當(dāng)然久了。

右側(cè)其實(shí)還可以繼續(xù)優(yōu)化，但感覺(jué)沒(méi)必要，swiper其實(shí)并不大。

那么現(xiàn)在就可以具體定位到問(wèn)題了，由于項(xiàng)目是多SPA應(yīng)用，致使.vue文件眾多，在項(xiàng)目啟動(dòng)時(shí)進(jìn)行eslint檢查和加載耗時(shí)過(guò)長(zhǎng)，導(dǎo)致項(xiàng)目啟動(dòng)時(shí)間較久。

解決方案

找到問(wèn)題之后就得解決問(wèn)題了，初步的解決方案有兩個(gè)：

  1.  干掉eslint，在本地編譯時(shí)不檢查
  2.  緩存

解決方案1必然是最簡(jiǎn)單的，但其實(shí)有點(diǎn)不合理，開(kāi)著eslint就是為了規(guī)范代碼格式，雖然在提交代碼時(shí)也有對(duì)應(yīng)的鉤子來(lái)格式化代碼，但在開(kāi)發(fā)過(guò)程中進(jìn)行提示可以更好的幫助我們形成合理的編碼方式。

所以現(xiàn)在剩下的方案就只有進(jìn)行緩存操作了，接下來(lái)筆者就開(kāi)始找相關(guān)插件來(lái)更好的進(jìn)行緩存了。

嘗試解決

首先是hard-source-webpack-plugin，這插件為模塊提供中間緩存步驟，但項(xiàng)目得跑兩次，第一次構(gòu)建時(shí)間正常，第二次大概能省去90%左右的時(shí)間。

這插件很多文章都有推薦，感覺(jué)很不錯(cuò)的樣子，用起來(lái)也很簡(jiǎn)單，只需要： 

 
 
 
 
    
  
  
  
  
  1. plugins: [  
    2. 
  
  
  
  
  2.   new HardSourceWebpackPlugin()  
    3. 
  
  
  
  
  3. ] 
    4.

這就完事了。

就這么簡(jiǎn)單？確實(shí)是這么簡(jiǎn)單，但也不簡(jiǎn)單，如果到此為止，筆者也不會(huì)折騰一下午了。

就這么簡(jiǎn)單的一安裝： 

 
 
 
 
    
  
  
  
  
  1. npm i hard-source-webpack-plugin -D 
    2.

然后像一樣簡(jiǎn)單的配置，然后重啟項(xiàng)目，您猜怎么著？

報(bào)錯(cuò)了！

原因是什么呢？

是因?yàn)閟peed-measure-webpack-plugin或者webpack-bundle-analyzer中的某一個(gè)，為什么呢？

原因筆者其實(shí)并不太清楚，因?yàn)閱?dòng)的時(shí)候報(bào)的錯(cuò)是這樣的：

Cannot find module 'webpack/lib/DependenciesBlockVariable'

哦呦，這個(gè)錯(cuò)有點(diǎn)小意外，怎么會(huì)突然報(bào)webpack的錯(cuò)呢？

筆者也是百思不得其解啊，去Google也沒(méi)有人遇到這種問(wèn)題。

不得已，只能去hard-source-webpack-plugin的github上看issue，發(fā)現(xiàn)其實(shí)有人遇到這個(gè)問(wèn)題的，他們的解決方案就是降低webpack的版本，可筆者這里沒(méi)辦法這么做，因?yàn)槎技稍趘ue-cli里了，而且這個(gè)還是公司內(nèi)部包了一層的，這就根本不可能降版本了。

第一個(gè)轉(zhuǎn)機(jī)

那還能怎么辦呢？

實(shí)在沒(méi)有辦法了，筆者嘗試搜索DependenciesBlockVariable的相關(guān)內(nèi)容，這時(shí)事情發(fā)生了一絲微妙的變換，原來(lái)這個(gè)功能在webpack5中被移除了，難道是因?yàn)楣緝?nèi)部的vue-cli用的是webpack5.x版本？

img

筆者當(dāng)即在node_modules里面找到了插件，然后查看了package.json文件，結(jié)果失望的發(fā)現(xiàn)webpack的版本是4.2.6，這就令人絕望了，難道真的不可以么？

既然打開(kāi)了webpack的文檔，那就好好看看吧。老實(shí)說(shuō)這文檔筆者已經(jīng)看了N次了，真是每次看都有小驚喜，功能真是太多了。

翻著翻著就看到了這個(gè)小功能：

哦呦，還真有點(diǎn)小驚喜呦，這功能簡(jiǎn)直了，這不就是我想要的么？然后當(dāng)機(jī)立斷，往vue.config.js里一家，您猜怎么著？

成了！

雖然文檔是webpack5.0的，但筆者發(fā)現(xiàn)4.x版本中也有這個(gè)功能，可能若一弱一些吧，多少能用啊。

重啟了幾次項(xiàng)目后發(fā)現(xiàn)啟動(dòng)時(shí)間已經(jīng)穩(wěn)定了，效果真的還不錯(cuò)呦～

img

直接給我干到了14秒，雖然有些不太穩(wěn)定，但這已經(jīng)是當(dāng)前狀態(tài)的最好解決方案了。

所以最后的代碼就是： 

 
 
 
 
    
  
  
  
  
  1. chainWebpack: (config) => {  
    2. 
  
  
  
  
  2.   config.cache(true)  
    3. 
  
  
  
  
  3. } 
    4.

用chainWebpack的原因是項(xiàng)目中其實(shí)沒(méi)有獨(dú)立的webpack.config.js文件，所以只能放在vue.config.js文件中，使用chainWebpack來(lái)將配置插入到webpack中去。

你以為事情到這里就結(jié)束了么？太簡(jiǎn)單了。

第二個(gè)轉(zhuǎn)機(jī)

解決完問(wèn)題后，當(dāng)然要把speed-measure-webpack-plugin和webpack-bundle-analyzer這兩個(gè)插件刪掉了，然后整理整理代碼，推上去完事。

可筆者還是不死心，為啥hard-source-webpack-plugin不好使呢？不應(yīng)該啊，為啥別人都能用，自己的項(xiàng)目卻用不了呢？

為了再次操作一手，也是為了更好的優(yōu)化項(xiàng)目的啟動(dòng)時(shí)間，筆者再次安裝了hard-source-webpack-plugin，并且對(duì)其進(jìn)行了配置： 

 
 
 
 
    
  
  
  
  
  1. chainWebpack: (config) => {  
    2. 
  
  
  
  
  2.   config.plugin('cache').use(HardSourceWebpackPlugin)  
    3. 
  
  
  
  
  3. } 
    4.

這次再一跑，您猜怎么著？

成了！

為了避免再次啟動(dòng)失敗了，筆者這次沒(méi)有使用speed-measure-webpack-plugin和webpack-bundle-analyzer這兩個(gè)插件，所以啟動(dòng)時(shí)間也沒(méi)法具體估計(jì)了，但目測(cè)時(shí)間再10秒以內(nèi)，強(qiáng)啊。

所以說(shuō)hard-source-webpack-plugin失敗的原因可能就是那兩個(gè)統(tǒng)計(jì)插件的原因了，得虧再試了一次，要不然就不明不白的GG了。

結(jié)論

這里的結(jié)論就很簡(jiǎn)單了，有兩個(gè)版本。

首先，如果項(xiàng)目能使用hard-source-webpack-plugin就很方便了，用就完事了，啥事也不需要干，所以這一行代碼是： 

 
 
 
 
    
  
  
  
  
  1. config.plugin('cache').use(HardSourceWebpackPlugin) 
    2.

大概真能快90%以上，官方并沒(méi)有虛報(bào)時(shí)間。

其次，如果用不了hard-source-webpack-plugin那就放棄吧，嘗試webpack自帶的cache功能也是不錯(cuò)的，雖然比不上hard-source-webpack-plugin，但多少也能提升70%左右的啟動(dòng)時(shí)間，所以這一行代碼是： 

 
 
 
 
    
  
  
  
  
  1. config.cache(true)  
    2. 
  
  
  
  
  2. 復(fù)制代碼 
    3.

并且不需要安裝任何插件，一步到位。

這兩種方法其實(shí)都是可行了，論穩(wěn)定和效果的話hard-source-webpack-plugin還是更勝一籌，但cache勝在不用裝額外的webpack插件，具體用什么就自己決定吧。


當(dāng)前標(biāo)題：一行可以讓項(xiàng)目啟動(dòng)快70%以上的代碼
路徑分享：http://www.dlmjj.cn/article/djpehpp.html