資訊專欄INFORMATION COLUMN
摘要：總結默認為，效果就是壓縮代碼。主要就是根據不同的策略來分割打包出來的。同時分割同步和異步代碼推薦。內部的參數可以和覆蓋外部的參數。正則匹配文件優先級是否復用存在的匹配規則重寫公用的次數重寫文件名稱強制生成文件名稱分隔符號
optimization總結 minimize
默認為true，效果就是壓縮js代碼。
minimizer可以自定義UglifyJsPlugin和一些配置,默認的壓縮為uglifyjs-webpack-plugin
//比如在構建的時候,希望新增css的壓縮
minimizer:
mode === "development"
? []
: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: mode === "development"
}),
new OptimizeCSSAssetsPlugin()
]
runtimeChunk
默認為false,runtime相關的代碼(各個模塊之間的引用和加載的邏輯)內嵌入每個entry。
默認為true,編譯錯誤的時候是否不生成資源。
namedModules,namedChunksdevelopment默認都為true,production默認為false，選擇是否給module和chunk更有意義的名稱。
nameModules:true這里會顯示路徑
nameModules:false直接采用索引自增
namedChunks:true
namedChunks:false采用索引
moduleIds一般不建議配置namedModules,namedChunks
針對module的配置，這里會取hashed。
針對chunk的配置，特別是異步代碼一般會采用@vue-cli3推薦的插件
removeAvailableModules,removeEmptyChunks,mergeDuplicateChunks,flagIncludedChunks這4個參數構建默認都是true,主要是用于構建優化，不需要改,基本就是字面意思。
splitChunks主要就是根據不同的策略來分割打包出來的bundle。
默認配置:
async（默認）：
splitChunks:{
chunks:"async"http://分割異步打包的代碼，
}
打包出b和vue兩個chunk。
all:
splitChunks:{
chunks:"all",//同時分割同步和異步代碼,推薦。
cacheGroup:{//默認的規則不會打包,需要多帶帶定義
a: {
test: /a.js/,
chunks: "all",
name: "a",
enforce: true
}
}
}
initial
splitChunks:{
chunks:"initial"http://也會同時打包同步和異步，但是異步內部的引入不再考慮，直接打包在一起，會將vue和b的內容直接打包成chunk,
cacheGroup:{//默認的規則不會打包,需要多帶帶定義
a: {
test: /a.js/,
chunks: "all",
name: "a",
enforce: true
}
}
}
2.name
分割的js名稱，默認為true，返回
${cacheGroup的key} ${automaticNameDelimiter} ${moduleName},可以自定義。
3.minChunks
最小公用模塊次數，默認為1
4.minSize,maxSize,maxAsyncRequests（按需加載時候最大的并行請求數）,maxInitialRequests（一個入口最大的并行請求數）
都為字面意思，一般不建議改。
5.cacheGroups
緩存策略，默認設置了分割node_modules和公用模塊。內部的參數可以和覆蓋外部的參數。
test 正則匹配文件
priority 優先級
reuseExistingChunk是否復用存在的chunk
cacheGroup:{
a: {
test: /a.js/,//匹配規則
minChunks:2,//重寫公用chunks的次數
chunks: "all",
name: "a",//重寫文件名稱
enforce: true //強制生成
}
}
6.automaticNameDelimiter
文件名稱分隔符號~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108724.html
摘要：特性比較熱門的兩大特性，零配置和速度快號稱提速上限一般情況下，相比于低版本，場景下第三方依賴打包速度和場景下本地服務首次啟動速度都得到顯著提升零配置通過指定當前場景為開發模式還是生產模式，自動設置好當前場景的默認配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號稱提速上限98%） 一般情況下，webpack4相比于低版本，prod...
摘要：去做想做的事，去愛值得的人去成為自己喜歡的模樣，去讓自己發光渾身充滿力量，充實的日子最美好各位早安，這里是平頭哥聯盟，我是首席填坑官蘇南，用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言 繼上一次webpack的基礎配置分享之后，本次將分享一些工作中項目常用的配置插件、也...
摘要：默認為根據自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...
摘要：默認出入口在中，不再強制要求指定和路徑。構建模式提供了兩種構建模式可供選擇和選項描述會將的值設為。如果是，那就會開啟。默認只會對按需加載的代碼做分割。在或更低版本中，如果你想為一個推導出來的定制選項，你不得不在自己的選項中將它重復一遍。 前言 現在距離2018年2月15號webpack4.0.0出來已經有一段時間了，現在已經出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強大，...
閱讀 1211·2023-04-25 20:31
閱讀 3718·2021-10-14 09:42
閱讀 1485·2021-09-22 16:06
閱讀 2636·2021-09-10 10:50
閱讀 3524·2021-09-07 10:19
閱讀 1772·2019-08-30 15:53
閱讀 1170·2019-08-29 15:13
閱讀 2818·2019-08-29 13:20
