成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack4 optimization總結(jié)

RyanQ / 1080人閱讀

摘要：總結(jié)默認(rèn)為，效果就是壓縮代碼。主要就是根據(jù)不同的策略來分割打包出來的。同時分割同步和異步代碼推薦。內(nèi)部的參數(shù)可以和覆蓋外部的參數(shù)。正則匹配文件優(yōu)先級是否復(fù)用存在的匹配規(guī)則重寫公用的次數(shù)重寫文件名稱強(qiáng)制生成文件名稱分隔符號

optimization總結(jié) minimize

默認(rèn)為true，效果就是壓縮js代碼。

minimizer

可以自定義UglifyJsPlugin和一些配置,默認(rèn)的壓縮為uglifyjs-webpack-plugin

//比如在構(gòu)建的時候,希望新增css的壓縮
minimizer:
  mode === "development"
    ? []
    : [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: mode === "development"
        }),
        new OptimizeCSSAssetsPlugin()
      ]
runtimeChunk

默認(rèn)為false,runtime相關(guān)的代碼(各個模塊之間的引用和加載的邏輯)內(nèi)嵌入每個entry。

true：對于每個entry會生成runtime~${entrypoint.name}的文件。

"single": 會生成一個唯一多帶帶的runtime.js文件，就是manifest。

multiple：和true一致。
name:{}：自定義runtime文件的name

noEmitOnErrors

默認(rèn)為true,編譯錯誤的時候是否不生成資源。

namedModules,namedChunks

development默認(rèn)都為true,production默認(rèn)為false，選擇是否給module和chunk更有意義的名稱。

nameModules:true這里會顯示路徑

nameModules:false直接采用索引自增

namedChunks:true

namedChunks:false采用索引

moduleIds

一般不建議配置namedModules,namedChunks
針對module的配置，這里會取hashed。

針對chunk的配置，特別是異步代碼一般會采用@vue-cli3推薦的插件

removeAvailableModules,removeEmptyChunks,mergeDuplicateChunks,flagIncludedChunks

這4個參數(shù)構(gòu)建默認(rèn)都是true,主要是用于構(gòu)建優(yōu)化，不需要改,基本就是字面意思。

splitChunks

主要就是根據(jù)不同的策略來分割打包出來的bundle。
默認(rèn)配置:

1.chunks

async（默認(rèn)）：

splitChunks:{
   chunks:"async"http://分割異步打包的代碼，
}

打包出b和vue兩個chunk。

all:

splitChunks:{
   chunks:"all",//同時分割同步和異步代碼,推薦。
   cacheGroup:{//默認(rèn)的規(guī)則不會打包,需要多帶帶定義
     a: {
       test: /a.js/,
       chunks: "all",
       name: "a",
       enforce: true
     }
   }
}

initial

splitChunks:{
   chunks:"initial"http://也會同時打包同步和異步，但是異步內(nèi)部的引入不再考慮，直接打包在一起，會將vue和b的內(nèi)容直接打包成chunk,
   cacheGroup:{//默認(rèn)的規(guī)則不會打包,需要多帶帶定義
     a: {
       test: /a.js/,
       chunks: "all",
       name: "a",
       enforce: true
     }
   }
}

2.name
分割的js名稱，默認(rèn)為true，返回
${cacheGroup的key} ${automaticNameDelimiter} ${moduleName},可以自定義。

3.minChunks
最小公用模塊次數(shù)，默認(rèn)為1

4.minSize,maxSize,maxAsyncRequests（按需加載時候最大的并行請求數(shù)）,maxInitialRequests（一個入口最大的并行請求數(shù)）
都為字面意思，一般不建議改。

5.cacheGroups
緩存策略，默認(rèn)設(shè)置了分割node_modules和公用模塊。內(nèi)部的參數(shù)可以和覆蓋外部的參數(shù)。
test 正則匹配文件
priority 優(yōu)先級
reuseExistingChunk是否復(fù)用存在的chunk

   cacheGroup:{
     a: {
       test: /a.js/,//匹配規(guī)則
       minChunks:2,//重寫公用chunks的次數(shù)
       chunks: "all",
       name: "a",//重寫文件名稱
       enforce: true //強(qiáng)制生成
     }
   }

6.automaticNameDelimiter
文件名稱分隔符號~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108724.html

相關(guān)文章

  • webpack4 配置解析和實戰(zhàn)

    摘要：特性比較熱門的兩大特性，零配置和速度快號稱提速上限一般情況下，相比于低版本，場景下第三方依賴打包速度和場景下本地服務(wù)首次啟動速度都得到顯著提升零配置通過指定當(dāng)前場景為開發(fā)模式還是生產(chǎn)模式，自動設(shè)置好當(dāng)前場景的默認(rèn)配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號稱提速上限98%） 一般情況下，webpack4相比于低版本，prod...

    王笑朝 評論0 收藏0

  • webpack4配置之分享幾個常用插件

    摘要：去做想做的事，去愛值得的人去成為自己喜歡的模樣，去讓自己發(fā)光渾身充滿力量，充實的日子最美好各位早安，這里是平頭哥聯(lián)盟，我是首席填坑官蘇南，用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言 　　繼上一次webpack的基礎(chǔ)配置分享之后，本次將分享一些工作中項目常用的配置插件、也...

    Jackwoo 評論0 收藏0

  • webpack4使用筆記之plugin

    摘要：默認(rèn)為根據(jù)自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優(yōu)化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

    ymyang 評論0 收藏0

  • 如何優(yōu)雅的升級到 webpack4

    摘要：默認(rèn)出入口在中，不再強(qiáng)制要求指定和路徑。構(gòu)建模式提供了兩種構(gòu)建模式可供選擇和選項描述會將的值設(shè)為。如果是，那就會開啟。默認(rèn)只會對按需加載的代碼做分割。在或更低版本中，如果你想為一個推導(dǎo)出來的定制選項，你不得不在自己的選項中將它重復(fù)一遍。 前言 現(xiàn)在距離2018年2月15號webpack4.0.0出來已經(jīng)有一段時間了，現(xiàn)在已經(jīng)出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強(qiáng)大，...

    zhangfaliang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<