亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Webpack5正式發(fā)布,有哪些新特性

 更新時(shí)間:2020年10月12日 10:18:08   作者:眠云  
這篇文章主要介紹了Webpack5正式發(fā)布,有哪些新特性,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

webpack作為最使用最廣泛的前端打包工具,已經(jīng)成為前端工程化基礎(chǔ)設(shè)施的一部分。而Webpack上一個(gè)大版本更新已經(jīng)是18年的時(shí)候了,兩年時(shí)間過(guò)去了讓我們看看Webpack5都帶來(lái)了哪些新特性,對(duì)我們的應(yīng)用又有哪些幫助。

概覽

下面這張圖是 Webpack 官方 Changelog 里面截圖出來(lái)的,可以看到​主要有這些方面的提高:

  • 通過(guò)持久化緩存提高性能
  • 采用更好的持久化緩存算法和默認(rèn)行為
  • 通過(guò)優(yōu)化 Tree Shaking 和代碼生成來(lái)減小Bundle體積
  • 提高 Web 平臺(tái)的兼容性
  • 清除之前為了實(shí)現(xiàn) Webpack4 沒(méi)有不兼容性變更導(dǎo)致的不合理 state
  • 嘗試現(xiàn)在引入重大更改來(lái)為將來(lái)的功能做準(zhǔn)備,以使我們能夠盡可能長(zhǎng)時(shí)間地使用 Webpack 5

不得不說(shuō),這個(gè)官方聲明稍微簡(jiǎn)略了一點(diǎn),只提到了持久化緩存優(yōu)化性能和更好的 Tree Shaking,Module federation 這個(gè)重大特性居然提都沒(méi)有提。下面還是跟著小編看看具體都升級(jí)了哪些部分。

過(guò)時(shí)功能移除

首先是去掉了在 Webpack4 里面已經(jīng) Warming 的功能。

同時(shí) IgnorePlugin 和 BannerPlugin 現(xiàn)在必須傳入一個(gè)參數(shù),參數(shù)可以是 Object、String或者Function

require.include 語(yǔ)法被廢棄,使用時(shí)會(huì)有 Warming。當(dāng)然這個(gè)行為可以通過(guò) Rule.parser.requireInclude 來(lái)把這個(gè)語(yǔ)法改成 allowed, deprecated 或者 disabled

去掉自動(dòng) Node.js Polyfills 。早期 Webpack 的主要目的是讓 Node.js 的模塊能夠在瀏覽器運(yùn)行,但隨著模塊格局的改變,越來(lái)越多的模塊只用于瀏覽器,這個(gè)時(shí)候再自動(dòng) Polyfills 一些 Node 模塊(例如 crypto)無(wú)疑會(huì)增加打包體積,在 Webpack5 之后去掉了這個(gè)自動(dòng)行為

長(zhǎng)期緩存

確定性的模塊、模塊ID和導(dǎo)出名稱(chēng)。

  • 首先是模塊、ID和導(dǎo)出名稱(chēng)都唯一確定下來(lái),背后對(duì)應(yīng)的配置是 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
  • 其中模塊和模塊ID用 3 ~ 4 位的數(shù)字ID,導(dǎo)出名稱(chēng)用 2 位的數(shù)字ID
  • 這個(gè)設(shè)置是默認(rèn)開(kāi)啟的,但也允許通過(guò)上述配置修改

真實(shí)內(nèi)容哈希

  • 在 Webpack5 里會(huì)使用文件內(nèi)容的真實(shí)哈希 [contenthash],而不是之前的僅僅使用文件內(nèi)部結(jié)構(gòu)的哈希
  • 這對(duì)于長(zhǎng)期緩存有著積極的影響,尤其是代碼里面只有注釋和變量名修改的時(shí)候,Webpack會(huì)繼續(xù)用之前的緩存而不是新的文件內(nèi)容

開(kāi)發(fā)支持

首先是 Chunk IDs 語(yǔ)義化。

新的 Chunk IDs 使用了新的語(yǔ)法生成 Chunk ID,一個(gè) Chunk ID 是有 chunk 的內(nèi)容來(lái)決定的。所以我們不再需要 import(/* webpackChunkName: "name" */ "module") 來(lái) debugging 了

但這樣也有可能把 chunk 里面的敏感內(nèi)容暴露出去(如果有的話(huà)),可以 通過(guò)修改 chunkIds: "named"來(lái)修改這一行為

其次是 Module Federation

  • 這是一個(gè)值得濃墨重彩的特性。模塊聯(lián)邦 允許多個(gè) Webpack 構(gòu)建產(chǎn)物一起工作,在運(yùn)行時(shí)把多個(gè)構(gòu)建產(chǎn)物聚合到一起,看起來(lái)就像是一個(gè)大的構(gòu)建產(chǎn)物一樣。
  • 比如下面這個(gè)例子 app_one 和 app_two 使用了共享的 ["react", "react-dom","react-router-dom"],同時(shí) app_two 把自己的 Dialog 暴露給了 app_one 使用
  • 通過(guò)模塊聯(lián)邦可以原生解決模塊直接互相依賴(lài)的問(wèn)題,在微前端領(lǐng)域尤其適用!同時(shí)一些基礎(chǔ)依賴(lài)也有可能都改成外部依賴(lài),在本地開(kāi)發(fā)的時(shí)候就無(wú)需引入,通過(guò)避免眾所周知的 node_modules 層次太深的問(wèn)題,在本地開(kāi)發(fā)過(guò)程中有可能實(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)出模塊之間的依賴(lài)關(guān)系,Webpack5 里面會(huì)通過(guò) optimization.innerGraph記錄依賴(lài)關(guān)系。比如下面這個(gè)例子,只有 test 方法使用了 someting 。最終可以實(shí)現(xiàn)標(biāo)記更多沒(méi)有使用的導(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ī)范的模塊開(kāi)始支持了

其他特性

  • 新的 Web 平臺(tái)支持。在Webpack 5 里面開(kāi)始原生支持 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)類(lèi)應(yīng)用開(kāi)始升級(jí)
遷移指南:https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

小結(jié)

可以看到,兩年時(shí)間過(guò)去 Webpack5 進(jìn)行了大量的升級(jí),包括更好的性能、更強(qiáng)的開(kāi)發(fā)能力支持以及更多原生的特性。而Webpack5帶來(lái)的影響也不僅僅于此,Module Federation 對(duì)于模塊依賴(lài)關(guān)系的改變,對(duì)于現(xiàn)有開(kāi)發(fā)模式的沖擊還在進(jìn)一步觀(guān)察中。期待 Web 開(kāi)發(fā)越來(lái)越好。

到此這篇關(guān)于Webpack5正式發(fā)布,有哪些新特性的文章就介紹到這了,更多相關(guān)Webpack5 新特性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 簡(jiǎn)單的分頁(yè)代碼js實(shí)現(xiàn)

    簡(jiǎn)單的分頁(yè)代碼js實(shí)現(xiàn)

    簡(jiǎn)單的分頁(yè)代碼js實(shí)現(xiàn),分享給大家,感興趣的小伙伴們可以參考一下
    2016-05-05
  • JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法

    JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法

    這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實(shí)例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法

    JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法

    這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法,涉及JavaScript字符串與日期相互轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下
    2016-03-03
  • Vue自定義日歷小控件使用方法詳解

    Vue自定義日歷小控件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue自定義日歷小控件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JS字符串補(bǔ)全方法padStart()和padEnd()

    JS字符串補(bǔ)全方法padStart()和padEnd()

    這篇文章主要介紹了JS字符串補(bǔ)全方法padStart()和padEnd(),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • TypeScript中的函數(shù)

    TypeScript中的函數(shù)

    這篇文章主要介紹了TypeScript中的函數(shù),一般JavaScript中的函數(shù)定義常用的有使用function關(guān)鍵字聲明函數(shù)、使用字面量方式聲明函數(shù)、使用箭頭函數(shù)聲明函數(shù)等幾種函數(shù),下面我們大家就一起進(jìn)入文章了解這些函數(shù)的具體定義吧,需要的朋友可以參考一下
    2021-12-12
  • Ajax 文件上傳進(jìn)度監(jiān)聽(tīng)之upload.onprogress案例詳解

    Ajax 文件上傳進(jìn)度監(jiān)聽(tīng)之upload.onprogress案例詳解

    這篇文章主要介紹了Ajax 文件上傳進(jìn)度監(jiān)聽(tīng)之upload.onprogress案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • js和C# 時(shí)間日期格式轉(zhuǎn)換的簡(jiǎn)單實(shí)例

    js和C# 時(shí)間日期格式轉(zhuǎn)換的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇js和C# 時(shí)間日期格式轉(zhuǎn)換的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • JavaScript中判斷數(shù)據(jù)類(lèi)型的方法總結(jié)

    JavaScript中判斷數(shù)據(jù)類(lèi)型的方法總結(jié)

    這篇文章主要為大家詳細(xì)介紹了一些JavaScript中判斷數(shù)據(jù)類(lèi)型的方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的小伙伴可以了解一下
    2023-07-07
  • javascript獲得網(wǎng)頁(yè)窗口實(shí)際大小的示例代碼

    javascript獲得網(wǎng)頁(yè)窗口實(shí)際大小的示例代碼

    網(wǎng)頁(yè)窗口實(shí)際大小如何獲得,可行的方法有很多,在本文將為大家介紹下使用javascript是怎樣做到的
    2013-09-09

最新評(píng)論