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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
npm 语义版本控制详解
Sep 10 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
Javascript实现简易天数计算器
2020/05/18 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
原生js实现放大镜组件
2021/01/22 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
《孔繁森》教学反思
2014/04/17 职场文书
活动总结模板
2014/05/09 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年财政局工作总结
2014/12/09 职场文书
先进单位事迹材料
2014/12/25 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
JavaScript流程控制(分支)
2021/12/06 Javascript
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers