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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
JavaScript ES6的函数拓展
Jan 18 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Django CBV类的用法详解
2019/07/26 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
临时工聘用合同协议书
2014/10/29 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
文艺演出主持词
2015/07/01 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫