- 原文地址:webpack 3: Official Release!!
- 原文做者:Sean T. Larkin
- 譯文出自:掘金翻譯計劃
- 譯者:xilihuasi
- 校對者:achilleo
終於來了,美妙極了。前端
在咱們發佈 webpack v2 以後,咱們對社區作了一些許諾。咱們承諾將在將來發布一些大家投票選出的特性。此外,咱們的週期發佈將會更快,更穩定。react
再也不有一年之久的測試版本,版本之間再也不有爆炸性的變化。咱們以大家和社區讓 webpack 更繁榮的名義,保證大家行使本身的權利。android
webpack 團隊自豪地宣佈,今天 webpack 3.0.0 發佈啦!!!今天你就能夠下載或更新!!webpack
npm install webpack@3.0.0 --save-dev
ios
或者git
yarn add webpack@3.0.0 --dev
github
從 webpack 2 遷移到 3,應該 只需在 terminal 中執行升級命令。由於內部的重大改變可能會影響一些插件,咱們把這項特性做爲重要更新收錄了。web
目前爲止98% 的用戶在升級後沒有影響原有功能的使用npm
正如前面提到的,咱們旨在發佈大家投票選出的那些特性!因爲 GitHub 上大量的貢獻,以及來自咱們支持者和贊助商的支持,咱們已經有實現全部這些特性的能力。 😍後端
做用域提高是 webpack 3 的主要功能。以前版本的 webpack 在打包時的一個妥協是包裏面的每一個模塊都會被包裝到一個獨立的函數閉包中。這些包裝函數使你在瀏覽器中執行的 JavaScript 代碼變得更慢。相比之下,例如 Closure Compiler 和 RollupJs 這樣的工具把全部模塊的做用域‘提高’或者串聯在一個閉包,而且使你的代碼在瀏覽器中有更快的執行時間。
直至今天,使用 webpack 3,你能夠立刻把以下插件添加到你的配置中來啓用做用域提高:
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};複製代碼
具體而言,做用域提高是一個基於 ECMAScript Module 語法的特性。正因如此,webpack 可能會根據你使用的模塊種類,以及其餘條件回退到普通的打包方式。
爲了隨時瞭解什麼觸發了這些回退,咱們添加了一個 --display-optimization-bailout
命令行標誌來告訴你什麼因素致使了這些回退。
由於做用域提高將移除模塊的函數包裝,你將會看到文件大小的少許精簡。然而,更顯著的提高在於,瀏覽器加載 JavaScript 的時候有多麼迅速。若是你在作了比較以後感到很爽,或者自由地獲取數據響應,那就快去跟朋友分享吧!
當咱們在 webpack 2 中介紹動態引入語法( import()
)的使用時,用戶們擔憂他們不能像使用 require.ensure
同樣建立命名塊。
咱們如今已經採用了社區創造的「魔法註解」,擁有傳遞塊名的能力,以及其餘就像 import()
語句的行內註釋。
import(/* webpackChunkName: "my-chunk-name" */ 'module');複製代碼
經過使用註解,咱們能夠保證加載的規範,而且仍然提供你喜歡的塊命名特性。雖然這些技術性的特性咱們已經在 v2.4 和 v2.6 中發佈了,咱們努力提高穩定性及修復 bug 來保證這些特性在 v3 中正式落地。如今已經可使用和 require.ensure
同樣靈活的動態引入語法了。
想要了解更多資訊,來看咱們的代碼拆分的最新文檔指南詳細瞭解這些特性!!!
咱們還有一些特性和功能增強但願提供給大家!!!可是飯得一口一口吃,事情要一件一件作,在咱們的投票頁面,給投那些你想看到的特性吧!
這裏還有一些咱們仍然想提供給大家的東西:
全部咱們的用戶、貢獻者、文檔做者、博客主、贊助商、支持者和維護者,都是這些年來幫助咱們保證 webpack 成功的投資人。
爲此,感謝大家全部人。是大家使這些成爲了可能,咱們已經火燒眉毛跟大家分享將來咱們還有哪些黑科技了!!
沒時間幫助貢獻?想用其餘方式回饋?咱們的 open collective。Open Collective 不只支撐整個核心團隊,並且還幫助那些在業餘時間花了大量時間來提高咱們組織的貢獻者們! ❤
掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區,文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃。