終於走到這裡,太美了。
??webpack 3 正式釋出??
作用域提升,“魔法註釋”,以及更多新特性!
在釋出了 webpack v2 之後,我們曾向社群做了一些承諾。我們承諾將會發布由使用者票選出來的功能。此外,我們承諾釋出週期會更快,更穩定。
這次沒有 beta 版本,完全向下相容。我們承諾讓你們——促進 webpack 成長的社群成員們——更輕鬆地使用。
webpack 團隊自豪地宣佈,今天我們釋出了 webpack 3.0.0! 現在就可以下載或升級!
1 |
npm install webpack@3.0.0 --save-dev |
或者
1 |
yarn add webpack@3.0.0 --dev |
從 webpack 2 遷移到 3,你只需要執行升級命令,而不需要修改任何程式碼。我們將這次升級標記為版本的重大升級,是因為內部的突破性變化可能會影響某些外掛的使用。
到目前為止,98% 的升級的使用者都沒有遇到任何不相容!
有哪些新特性?
上文已經提到,我們釋出了一些由使用者投票選出的功能,感謝 Github , 贊助商和我們的支持者,有了他們我們才能做出每一個改進。?
?作用域提升(Scope Hoisting )?
作用域提升是 webpack 3 的重點功能。之前 webpack 在打包時,您的 bundle 中的每個模組都將被包裝在單獨的函式閉包中。這些閉包會使您的 JavaScript 在瀏覽器中執行速度更慢。相比之下,像 Closure Compiler 和 RollupJS 這樣的工具可以將所有模組包裝在一個大的閉包內,從而使您的程式碼在瀏覽器中具有更快的執行速度。
如今,使用 webpack 3,您現在就可以在配置中新增下面的外掛以啟用作用域提升:
1 2 3 4 5 |
module.exports = { plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ] }; |
作用域提升是基於 ECMAScript 模組(Module)語法實現的一個特徵。通過作用域提升,webpack 可以根據你正在使用的模組和一些其他條件來判斷是否需要回退到普通的打包方式。
為了瞭解什麼觸發了這些回退,我們新增了一個--display-optimization-bailout
cli標誌,它將告訴你是什麼導致的回退。
同時,由於作用域提升會移除模組外的函式包裝,你可能會看到一些小的體積改進。然而,更顯著的改進是 JavaScript 在瀏覽器中載入的速度。如果您在比較使用之前和之後時發現載入速度取得了非常棒的改進,請隨時反饋一些資料,我們將很榮幸分享!
? “魔法註釋”(Magic Comments) ?
當我們在 webpack 2 中引入動態匯入語法(import()
)的用法時,使用者表示,他們不能像使用require.ensure
一樣建立命名程式碼塊(chunk)。
我們現在介紹由社群建立的“魔法註釋”,它可以傳遞程式碼塊的名稱,還有更多功能,例如可以新增更多的內聯註釋到import()
語句中。
1 |
import(/* webpackChunkName: "my-chunk-name" */ 'module'); |
通過使用註釋,我們能夠在使用動態匯入語法的同時,對程式碼塊進行命名。
儘管這是我們在 v2.4 和 v2.6 中釋出的技術特性,但在 v3 中,我們修復了這些功能的一些錯誤,使其變得更穩定。 現在允許動態匯入語法具有與require.ensure
相同的靈活性。
要了解更多資訊,請參閱我們最新文件的程式碼分割部分,新功能部分已經高亮!
? 接下來做什麼? ?
我們有很多功能和增強功能想要推出!但我們需要了解使用者需求的優先順序。所以訪問我們的投票頁面,並提出你想看到的功能!
這些是我們希望能帶給您的一些功能:
- 更好地構建快取
- 更快的初始構建和增量構建
- 更好的 TypeScript 體驗
- 改進長期快取
- WASM 模組支援
- 改善使用者體驗
? 致謝 ?
感謝我們所有的使用者,貢獻者,文件作者,部落格,贊助商,支持者和維護者。是他們幫助我們確保 webpack 在未來幾年成功。
為此,我們感謝所有人。webpack 發展到現在與你的支援密不可分,我們迫不及待地想要與你分享未來 webpack 的新進展!
沒有時間幫助貢獻? 想以其他方式回饋? 通過捐贈給我們的開放集體成為支持者或贊助商。 開放集體不僅有助於支援核心團隊,而且還支援那些在花了大量空餘時間幫助 webpack 進行改善的貢獻者!❤