今天就跟大家聊聊有關(guān)optimization怎么在webpack4中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都玻璃鋼坐凳小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

optimization總結(jié)

minimize

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

minimizer

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

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

runtimeChunk

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

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

'single': 會生成一個(gè)唯一單獨(dú)的runtime.js文件，就是manifest。

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

noEmitOnErrors

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

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

splitChunks

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

1.chunks

async（默認(rèn)）：

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

打包出b和vue兩個(gè)chunk。

all:

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

initial

splitChunks:{
  chunks:'initial'//也會同時(shí)打包同步和異步，但是異步內(nèi)部的引入不再考慮，直接打包在一起，會將vue和b的內(nèi)容直接打包成chunk,
  cacheGroup:{//默認(rèn)的規(guī)則不會打包,需要單獨(dú)定義
   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í)候大的并行請求數(shù)）,maxInitialRequests（一個(gè)入口大的并行請求數(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)制生成
   }
  }

看完上述內(nèi)容，你們對optimization怎么在webpack4中使用有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文題目：optimization怎么在webpack4中使用-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://weahome.cn/article/eicph.html