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 自定义函数缺省值的设置方法
May 05 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
python内打印变量之%和f的实例
2020/02/19 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
美国智能家居专家:tink
2019/06/04 全球购物
求网格中的黑点分布
2013/11/06 面试题
中软国际Java程序员机试题
2012/08/19 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
学生喝酒检讨书
2014/02/06 职场文书
道歉情书大全
2015/05/12 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
微信小程序实现聊天室功能
2021/06/14 Javascript
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Golang map映射的用法
2022/04/22 Golang