Webpack5正式發(fā)布,有哪些新特性
webpack作為最使用最廣泛的前端打包工具,已經(jīng)成為前端工程化基礎(chǔ)設(shè)施的一部分。而Webpack上一個(gè)大版本更新已經(jīng)是18年的時(shí)候了,兩年時(shí)間過去了讓我們看看Webpack5都帶來了哪些新特性,對(duì)我們的應(yīng)用又有哪些幫助。
概覽
下面這張圖是 Webpack 官方 Changelog 里面截圖出來的,可以看到主要有這些方面的提高:
- 通過持久化緩存提高性能
- 采用更好的持久化緩存算法和默認(rèn)行為
- 通過優(yōu)化 Tree Shaking 和代碼生成來減小Bundle體積
- 提高 Web 平臺(tái)的兼容性
- 清除之前為了實(shí)現(xiàn) Webpack4 沒有不兼容性變更導(dǎo)致的不合理 state
- 嘗試現(xiàn)在引入重大更改來為將來的功能做準(zhǔn)備,以使我們能夠盡可能長(zhǎng)時(shí)間地使用 Webpack 5
不得不說,這個(gè)官方聲明稍微簡(jiǎn)略了一點(diǎn),只提到了持久化緩存優(yōu)化性能和更好的 Tree Shaking,Module federation 這個(gè)重大特性居然提都沒有提。下面還是跟著小編看看具體都升級(jí)了哪些部分。
過時(shí)功能移除
首先是去掉了在 Webpack4 里面已經(jīng) Warming 的功能。
同時(shí) IgnorePlugin 和 BannerPlugin 現(xiàn)在必須傳入一個(gè)參數(shù),參數(shù)可以是 Object、String或者Function
require.include 語法被廢棄,使用時(shí)會(huì)有 Warming。當(dāng)然這個(gè)行為可以通過 Rule.parser.requireInclude 來把這個(gè)語法改成 allowed, deprecated 或者 disabled
去掉自動(dòng) Node.js Polyfills 。早期 Webpack 的主要目的是讓 Node.js 的模塊能夠在瀏覽器運(yùn)行,但隨著模塊格局的改變,越來越多的模塊只用于瀏覽器,這個(gè)時(shí)候再自動(dòng) Polyfills 一些 Node 模塊(例如 crypto)無疑會(huì)增加打包體積,在 Webpack5 之后去掉了這個(gè)自動(dòng)行為
長(zhǎng)期緩存
確定性的模塊、模塊ID和導(dǎo)出名稱。
- 首先是模塊、ID和導(dǎo)出名稱都唯一確定下來,背后對(duì)應(yīng)的配置是
chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic" - 其中模塊和模塊ID用 3 ~ 4 位的數(shù)字ID,導(dǎo)出名稱用 2 位的數(shù)字ID
- 這個(gè)設(shè)置是默認(rèn)開啟的,但也允許通過上述配置修改
真實(shí)內(nèi)容哈希
- 在 Webpack5 里會(huì)使用文件內(nèi)容的真實(shí)哈希 [contenthash],而不是之前的僅僅使用文件內(nèi)部結(jié)構(gòu)的哈希
- 這對(duì)于長(zhǎng)期緩存有著積極的影響,尤其是代碼里面只有注釋和變量名修改的時(shí)候,Webpack會(huì)繼續(xù)用之前的緩存而不是新的文件內(nèi)容
開發(fā)支持
首先是 Chunk IDs 語義化。
新的 Chunk IDs 使用了新的語法生成 Chunk ID,一個(gè) Chunk ID 是有 chunk 的內(nèi)容來決定的。所以我們不再需要 import(/* webpackChunkName: "name" */ "module") 來 debugging 了
但這樣也有可能把 chunk 里面的敏感內(nèi)容暴露出去(如果有的話),可以 通過修改 chunkIds: "named"來修改這一行為
其次是 Module Federation
- 這是一個(gè)值得濃墨重彩的特性。模塊聯(lián)邦 允許多個(gè) Webpack 構(gòu)建產(chǎn)物一起工作,在運(yùn)行時(shí)把多個(gè)構(gòu)建產(chǎn)物聚合到一起,看起來就像是一個(gè)大的構(gòu)建產(chǎn)物一樣。
- 比如下面這個(gè)例子 app_one 和 app_two 使用了共享的
["react", "react-dom","react-router-dom"],同時(shí) app_two 把自己的 Dialog 暴露給了 app_one 使用 - 通過模塊聯(lián)邦可以原生解決模塊直接互相依賴的問題,在微前端領(lǐng)域尤其適用!同時(shí)一些基礎(chǔ)依賴也有可能都改成外部依賴,在本地開發(fā)的時(shí)候就無需引入,通過避免眾所周知的 node_modules 層次太深的問題,在本地開發(fā)過程中有可能實(shí)現(xiàn)大幅提效
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "app_two_remote",
library: { type: "var", name: "app_two_remote" },
filename: "remoteEntry.js",
exposes: {
“./Dialog”: "./src/Dialog"
},
remotes: {
app_one: "app_one_remote",
},
shared: ["react", "react-dom","react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
chunks: ["main"]
})
]
};
更好的 Tree Shaking。
嵌套 tree-shaking。 Webpack現(xiàn)在會(huì)去追蹤 export 的鏈路,對(duì)于嵌套場(chǎng)景有更好的優(yōu)化,比如下面這個(gè)例子里 b 是不會(huì)出現(xiàn)在生產(chǎn)代碼里。
// inner.js
export const a = 1;
export const b = 2;
// module.js
import * as inner from "./inner";
export { inner }
// user.js
import * as module from "./module";
console.log(module.inner.a);
內(nèi)部模塊。Webpack 4 不會(huì)去分析導(dǎo)入和導(dǎo)出模塊之間的依賴關(guān)系,Webpack5 里面會(huì)通過 optimization.innerGraph記錄依賴關(guān)系。比如下面這個(gè)例子,只有 test 方法使用了 someting 。最終可以實(shí)現(xiàn)標(biāo)記更多沒有使用的導(dǎo)出項(xiàng)
import { something } from "./something";
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
Commondjs?,F(xiàn)在Webpack不僅僅支持 ES module 的 tree Shaking,commonjs規(guī)范的模塊開始支持了
其他特性
- 新的 Web 平臺(tái)支持。在Webpack 5 里面開始原生支持 JSON Modules、Asset Modules、Native Worker 和 異步模塊等等
- Webpack 生成的代碼不再僅僅是ES5,也會(huì)生成 ES6 的代碼
- Node.js 的最小支持版本從 6 升級(jí)到了 10
喜歡嘗鮮的同學(xué)現(xiàn)在就可以照著遷移指南升級(jí)自己的Webpack了,出于謹(jǐn)慎考慮建議優(yōu)先從從自己練手和后臺(tái)類應(yīng)用開始升級(jí)
遷移指南:https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md
小結(jié)
可以看到,兩年時(shí)間過去 Webpack5 進(jìn)行了大量的升級(jí),包括更好的性能、更強(qiáng)的開發(fā)能力支持以及更多原生的特性。而Webpack5帶來的影響也不僅僅于此,Module Federation 對(duì)于模塊依賴關(guān)系的改變,對(duì)于現(xiàn)有開發(fā)模式的沖擊還在進(jìn)一步觀察中。期待 Web 開發(fā)越來越好。
到此這篇關(guān)于Webpack5正式發(fā)布,有哪些新特性的文章就介紹到這了,更多相關(guān)Webpack5 新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript web網(wǎng)頁入門級(jí)開發(fā)詳解
Web框架正如前文所述, 在整個(gè)項(xiàng)目結(jié)構(gòu)中處于一個(gè)承上啟下的位置, 是整個(gè)項(xiàng)目的核心組件, 所以這次來聊聊Web框架的一些普適性特性和如何快速的入門2021-10-10
webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁面
這篇文章主要介紹了webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁面的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
用瀑布流來展現(xiàn)照片再好不過了,我的思路大概是一張一張的圖片插入,當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán),即這一行插入進(jìn)去了2013-04-04
JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
這幾天需要用到對(duì)HTML節(jié)點(diǎn)元素的刪/插操作,由于用到insertBefore方法的時(shí)候遇到了一些麻煩,現(xiàn)在作為知識(shí)的整理,分別對(duì)appendChild、insertBefore和insertAfter做個(gè)總結(jié)2010-12-12
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
導(dǎo)航條(navbar)在Bootstrap中是一個(gè)獨(dú)立組件,導(dǎo)航條(navbar)和導(dǎo)航(nav)在Bootstrap中是有明顯區(qū)別的,本文全面接觸神奇的Bootstrap導(dǎo)航條,感興趣的小伙伴們可以參考一下2016-08-08
JS動(dòng)畫定時(shí)器知識(shí)總結(jié)
這篇文章給大家總結(jié)了關(guān)于JS動(dòng)畫中定時(shí)器的相關(guān)用法以及相關(guān)知識(shí)點(diǎn)總結(jié),有需要的朋友可以參考學(xué)習(xí)下。2018-03-03

