溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

webpack3新特性簡介

發(fā)布時間：2020-08-01 02:18:40 來源：網(wǎng)絡(luò) 閱讀：917 作者：shptc 欄目：網(wǎng)絡(luò)安全

升級到webpack3

升級到webpack3，只需要通過npm安裝即可：

1
npm install webpack@3.0.0 --save-dev

　　

webpack3幾乎與webpack2完美兼容，除了會影響一些插件的使用，官方給出的數(shù)據(jù)是：98%的用戶升級后，沒有影響webpack功能的正常使用。升級的時候可能會有一些相關(guān)的warning，但是一般不影響使用。

1
2
3
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN html-webpack-plugin@2.28.0 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

　　

webpack3新特性

（1）Scope Hoisting-作用域提升

在之前的一篇文章webpack掃盲篇介紹過，webpack2處理后的每個模塊均被一個函數(shù)包裹，如下：

1
2
3
4
5
6
7
/* 50 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
    window.lib = {}
    ...   
/* harmony default export */ __webpack_exports__["a"] = (window.lib);
 
/***/ }),

　　

這樣會帶來一個問題：降低瀏覽器中JS執(zhí)行效率，這主要是閉包函數(shù)降低了JS引擎解析速度。

于是webpack團隊參考Closure Compiler和Rollup JS，將一些有聯(lián)系的模塊，放到一個閉包函數(shù)里面去，通過減少閉包函數(shù)數(shù)量從而加快JS的執(zhí)行速度。

webpack3通過設(shè)置ModuleConcatenationPlugin使用這個新特性：

1
2
3
4
5
module.exports = { 
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

　　

產(chǎn)出對比圖如下：

 webpack3新特性簡介 

 圖a：webpack2下的產(chǎn)出文件部分內(nèi)容   

 

 webpack3新特性簡介

圖b：webpack3下的產(chǎn)出文件部分內(nèi)容

 Scope Hoisting是基于ES Module的，對于Common.js和AMD的模塊不適用，不適用的情況下仍采用webpack2的模式。

（2）Magic Comments

在webpack2中引入了Code Splitting-Async的新方法import()，用于動態(tài)引入ES Module，webpack將傳入import方法的模塊打包到一個單獨的代碼塊（chunk），但是卻不能像require.ensure一樣，為生成的chunk指定chunkName，因此在webpack3中提出了Magic Comment用于解決該問題，用法如下：

1
import(/* webpackChunkName: "my-chunk-name" */ 'module');

　　

webpack的未來

想了解webpack的未來，建議先過一下webpack的歷史。

webpack1支持CMD和AMD，同時擁有豐富的plugin和loader，webpack逐漸得到廣泛應(yīng)用。

webpack2相對于webpack最大的改進就是支持ES Module，可以直接分析ES Module之間的依賴關(guān)系，而webpack1必須將ES Module轉(zhuǎn)換成CommonJS模塊之后，才能使用webpack進行下一步處理。除此之外webpack2支持tree sharking，與ES Module的設(shè)計思路高度契合。

webpack3相對于webpack2，過渡相對平穩(wěn)，但是新的特性大都圍繞ES Module提出，如Scope Hoisting和Magic Comment；

總之，webpack的未來肯定是圍繞ES的支持度、構(gòu)建速度與產(chǎn)出代碼的性能和用戶體驗來建設(shè)的，同時webpack的團隊已經(jīng)承諾會根據(jù)社區(qū)的投票來決定新特性開發(fā)優(yōu)先權(quán)。以下是公告中給出的未來的重點關(guān)注點：

  • 高性能的構(gòu)建緩存

  • 提升初始化速度和增量構(gòu)建效率

  • 更好的支持Type Script

  • 修訂長期緩存

  • 支持WASM 模塊支持

  • 提升用戶體驗


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

web
AI
助
手