专栏首页较真的前端Webpack 5有哪些值得期待▶️

Webpack 5有哪些值得期待▶️

本文首发于知乎,大家可以通过文章底部的阅读原文来访问原文地址。文末有视频。

Webpack 5已经到来

早在今年(2019年)的2月份,Webpack核心团队的Sean Larkin就做过一次关于webpack 5新特性的演讲,为大家讲述了webpack 5目前的开发进展,还有webpack 5会有哪些新特性。

img

现在,我们已经可以安装最新的webpack 5了,不过v5还不是正式版本。目前npm官网上的最新版本仍然是v4

img

为了体验v5版本,你需要使用下面的命令

yarn add webpack@next webpack-cli --dev

npm install webpack@next webpack-cli --save-dev

webpack 5有哪些值得期待

本次major版本的修改主要参照下面的四个主要方向:

  1. 利用持久缓存来提高构建性能
  2. 优化算法和默认值来改善长期缓存
  3. 重构了内部代码,而不引入重大变更
  4. 为了未来可能的功能,引入一些重大的变更,以便可以让团队长时间停留在v5版本

持久缓存(Persistent Caching)

先简单地概述一下webpack的工作原理:webpack读取入口文件(entry),然后递归查找所依赖的模块(module),构建成一个“依赖图”,然后根据配置中的加载器(loader)和打包策略来对模块进行编译。

但是如果中间有文件发生变化了,上面所述的整个递归遍历流程会重新再进行一次。

大致流程如下:

img

webpack 5利用持久缓存优化了整个流程,当检测到某个文件变化时,依照“依赖图”,只对修改过的文件进行编译,从而大幅提高了编译速度。

经过测试,16000模块的单页应用,速度可以提高98%

img

img

数据来自Sean Larkin的《The Road to Webpack 5》

命名IDs

在v5版本中,开发模式将默认开启全新的命名chunk id算法,编译后的chunk名称可读性大大加强。

模块ID(Module ID)由其相对于上下文的路径而确定,代码块ID(Chunk ID)由其内容来决定。

img

此外,在v5版本中还通过新的算法来帮助长期缓存(long-term caching)。在生产环境中,可以使用下面的配置来启用新算法:

chunkIds: "deterministic”,
moduleIds: “deterministic"

新算法会以确定的方式为模块(module)和代码块(chunk)分配一个非常短(3或4个字符)的数字ID。所以,今后再生产环境中,如果你修改了vendor bundle中的一个依赖,那些并没有发生变化的模块ID也不会改变,所以仍然可以被浏览器缓存,提高资源加载的性能。

img

NodeJS的polyfill脚本被移除

最开始,webpack的目标是允许在浏览器中运行大多数的Node模块,但是现在模块格局已经发生了重大变化,现在有很多模块是专门为前端开发的。在v4及以前的版本中,对于大多数的Node模块将自动添加polyfill脚本(腻子脚本)。

然而,这些大量繁杂的脚本都会添加到最终编译的代码中(bundle),但其实通常情况下是没有必要的。在v5版本中将尝试停止自动地添加polyfill脚本,转而专注于前端兼容模块。

在迁移到v5版本时,最好尽可能使用前端兼容模块,如果一定要用到核心模块的话,请为其添加polyfill(webpack会通过错误提示来指导帮助开发者)。

废弃了一些特性

那些在v4中已经被抛弃但是仍然可以被使用的特性,将再v5中彻底被废弃。

所以在迁移到v5时,请留意那些在v4中抛出“弃用警告”(deprecation warnings)的提示。

img

除此之外,还有一些东西也被移除了,但是在v4中没有抛出弃用警告,例如IgnorePlugin和BannerPlugin,现在必须传递一个options对象。

引入了更多新东西

webpack 5 要求node的最低版本为 Node 8。不再是之前的Node 6。

img

另外,webpack 5还引入了webAssembly、Hashing、多线程、还有workers。

总结

今年的前端小伙伴们要学习的东西还真多,Flutter、Vue 3.0、现在又来了Webpack 5。真是“学无止境”~~

参考文章:

  • New Features in Webpack 5
  • The Road to Webpack 5
  • Changelog-v5

本文分享自微信公众号 - 较真的前端(gh_7af41a2be77e),作者:英俊潇洒你冲哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于webpack的面试题总结

    本文首发于前端面试总结@知乎专栏,各位可以通过点击文章下方的阅读原来来访问原文地址

    用户1687375
  • [译]图解React

    React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

    用户1687375
  • Vue相关的前端面试题,每道题都很经典~

    用户1687375
  • Groovy基础

    以下内容节选自《Android Gradle权威指南》,更多关于《Android Gradle权威指南》的内容请参见http://yuedu.baidu.com...

    飞雪无情
  • CSS理解之z-index

    小胖
  • 亲历者说:敏捷?我被洗脑了吗?

    几年之前我还是个野生程序员的时候,对“敏捷”这个词是有些抗拒的。那时候,要么是没有想法、懒得去理会,要么就是主观上拒绝:

    ThoughtWorks
  • Python: Apply方法的应用

    Python允许你实时地创建函数参数列表. 只要把所有的参数放入一个元组中, 然后通过内建的 apply 函数调用函数. 如 Example 1-1.

    py3study
  • 高校人工智能教育“开荒”,还得靠这三步

    其中一本是关于人工智能深度学习的《深度学习导论与应用实践》,这本书由中国科学院大学深度学习领域的学者编著,清华大学出版社出版。

    罗超频道
  • Servlet 入门

    Java Servlet 是运行在 带有支持 Java Servlet 规范的解释器的 web 服务器上的 Java 类,它是作为来自 Web 浏览器或其他 H...

    用户2146693
  • 华为薪资垫底,腾讯阿里被逆袭,第一竟然是… | 2018互联网公司薪资排行榜

    但他说,公司里90%以上的同事工资都比他高,他这只能算是倒数,当时大家都认为他在装X。

    顶级程序员

扫码关注云+社区

领取腾讯云代金券