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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
JSONP基础知识详解
Mar 19 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 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中的正则表达式实例详解
2017/04/25 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
js jquery数组介绍
2012/07/15 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
webpack构建的详细流程探底
2018/01/08 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python编写爬虫小程序
2015/05/14 Python
git进行版本控制心得详谈
2017/12/10 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
一道Delphi上机题
2012/06/04 面试题
交警个人先进事迹材料
2014/05/11 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS