Webpack5正式发布,有哪些新特性


Posted in Javascript onOctober 12, 2020

webpack作为最使用最广泛的前端打包工具,已经成为前端工程化基础设施的一部分。而Webpack上一个大版本更新已经是18年的时候了,两年时间过去了让我们看看Webpack5都带来了哪些新特性,对我们的应用又有哪些帮助。

概览

下面这张图是 Webpack 官方 Changelog 里面截图出来的,可以看到​主要有这些方面的提高:

  • 通过持久化缓存提高性能
  • 采用更好的持久化缓存算法和默认行为
  • 通过优化 Tree Shaking 和代码生成来减小Bundle体积
  • 提高 Web 平台的兼容性
  • 清除之前为了实现 Webpack4 没有不兼容性变更导致的不合理 state
  • 尝试现在引入重大更改来为将来的功能做准备,以使我们能够尽可能长时间地使用 Webpack 5

不得不说,这个官方声明稍微简略了一点,只提到了持久化缓存优化性能和更好的 Tree Shaking,Module federation 这个重大特性居然提都没有提。下面还是跟着小编看看具体都升级了哪些部分。

过时功能移除

首先是去掉了在 Webpack4 里面已经 Warming 的功能。

同时 IgnorePlugin 和 BannerPlugin 现在必须传入一个参数,参数可以是 Object、String或者Function

require.include 语法被废弃,使用时会有 Warming。当然这个行为可以通过 Rule.parser.requireInclude 来把这个语法改成 allowed, deprecated 或者 disabled

去掉自动 Node.js Polyfills 。早期 Webpack 的主要目的是让 Node.js 的模块能够在浏览器运行,但随着模块格局的改变,越来越多的模块只用于浏览器,这个时候再自动 Polyfills 一些 Node 模块(例如 crypto)无疑会增加打包体积,在 Webpack5 之后去掉了这个自动行为

长期缓存

确定性的模块、模块ID和导出名称。

  • 首先是模块、ID和导出名称都唯一确定下来,背后对应的配置是 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
  • 其中模块和模块ID用 3 ~ 4 位的数字ID,导出名称用 2 位的数字ID
  • 这个设置是默认开启的,但也允许通过上述配置修改

真实内容哈希

  • 在 Webpack5 里会使用文件内容的真实哈希 [contenthash],而不是之前的仅仅使用文件内部结构的哈希
  • 这对于长期缓存有着积极的影响,尤其是代码里面只有注释和变量名修改的时候,Webpack会继续用之前的缓存而不是新的文件内容

开发支持

首先是 Chunk IDs 语义化。

新的 Chunk IDs 使用了新的语法生成 Chunk ID,一个 Chunk ID 是有 chunk 的内容来决定的。所以我们不再需要 import(/* webpackChunkName: "name" */ "module") 来 debugging 了

但这样也有可能把 chunk 里面的敏感内容暴露出去(如果有的话),可以 通过修改 chunkIds: "named"来修改这一行为

其次是 Module Federation

  • 这是一个值得浓墨重彩的特性。模块联邦 允许多个 Webpack 构建产物一起工作,在运行时把多个构建产物聚合到一起,看起来就像是一个大的构建产物一样。
  • 比如下面这个例子 app_one 和 app_two 使用了共享的 ["react", "react-dom","react-router-dom"],同时 app_two 把自己的 Dialog 暴露给了 app_one 使用
  • 通过模块联邦可以原生解决模块直接互相依赖的问题,在微前端领域尤其适用!同时一些基础依赖也有可能都改成外部依赖,在本地开发的时候就无需引入,通过避免众所周知的 node_modules 层次太深的问题,在本地开发过程中有可能实现大幅提效
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现在会去追踪 export 的链路,对于嵌套场景有更好的优化,比如下面这个例子里 b 是不会出现在生产代码里。

// 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);

内部模块。Webpack 4 不会去分析导入和导出模块之间的依赖关系,Webpack5 里面会通过 optimization.innerGraph记录依赖关系。比如下面这个例子,只有 test 方法使用了 someting 。最终可以实现标记更多没有使用的导出项

import { something } from "./something";

function usingSomething() {
return something;
}

export function test() {
return usingSomething();
}

Commondjs。现在Webpack不仅仅支持 ES module 的 tree Shaking,commonjs规范的模块开始支持了

其他特性

  • 新的 Web 平台支持。在Webpack 5 里面开始原生支持 JSON Modules、Asset Modules、Native Worker 和 异步模块等等
  • Webpack 生成的代码不再仅仅是ES5,也会生成 ES6 的代码
  • Node.js 的最小支持版本从 6 升级到了 10

喜欢尝鲜的同学现在就可以照着迁移指南升级自己的Webpack了,出于谨慎考虑建议优先从从自己练手和后台类应用开始升级
迁移指南:https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

小结

可以看到,两年时间过去 Webpack5 进行了大量的升级,包括更好的性能、更强的开发能力支持以及更多原生的特性。而Webpack5带来的影响也不仅仅于此,Module Federation 对于模块依赖关系的改变,对于现有开发模式的冲击还在进一步观察中。期待 Web 开发越来越好。

到此这篇关于Webpack5正式发布,有哪些新特性的文章就介绍到这了,更多相关Webpack5 新特性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
js密码强度实时检测代码
Mar 02 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
移动端JS实现拖拽两种方法解析
Oct 12 #Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 #Javascript
vue实现移动端返回顶部
Oct 12 #Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 #Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
谨慎使用PHP的引用原因分析
2012/09/06 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
python中异常捕获方法详解
2017/03/03 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python的debug实用工具 pdb详解
2019/07/12 Python
django 微信网页授权登陆的实现
2019/07/30 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
基于python 取余问题(%)详解
2020/06/03 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
2014年英语教师工作总结
2014/12/03 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
小学班级标语口号大全
2015/12/26 职场文书