BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Webpack 4.0 发布,带来配置简化、WebAssembly支持和性能提升

| 作者 Kevin Ball 关注 3 他的粉丝 ,译者 金灵杰 关注 5 他的粉丝 发布于 2018年3月20日. 估计阅读时间: 5 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

2月25日,目前最流行的JavaScript模块打包器——Webpack发布了其4.0版本。该版本包括了一个完全重新的插件系统,将WebAssembly支持提升到头等模块类型,简化了配置选项等特性。此次更新同时带来了巨大的性能提升,有报告称可以降低60%到98%的构建时间。

4.0版本中包含的一个重要改进是简化了依赖的配置文件。竞争对手模块打包器parcel.js宣传的其中一个主要特性就是不需要配置。此次版本发布后,Webpack引入了一个基于模式的最小化配置,默认情况下可以不使用任何配置文件。Prosper Otemuyiwa在Auth0博客上发表了一篇文章来阐述其这项特性的意义:

在此之前为了能够让Webpack打包应用,必须在webpack.config.js文件中定义一个入口。然而在Webpack 4中,没有必要再去定义入口,它会默认使用./src/index.js文件。

此外,也没有必要再定义生成的文件,Webpack会将打包后文件生成到/.dist/main.js。

这项看似华而不实的功能,对于小项目而言非常有意义,无需配置文件,只需webpack!

此次发布同时包含了一个完全重写的插件系统,主要是处于性能的原因。Webpack的核心开发人员Tobias Koppers曾在一篇介绍新系统的文章中解释过动机:

插件系统是Webpack的核心组件,这意味着插件钩子的调用频率非常高,许多钩子函数都是调用热点。

但是当前版本的插件系统使用非常通用的实现方式:使用arguments来表示任何数量的参数,然后循环获取以兼容各种参数数量的插件。对于每个钩子函数均如此,这使得调用插件方式有多种形态,难以优化。

新系统带来了更加明晰切便于优化的API,以提高性能、便于调优,同时能够更加方便的和强类型系统(如Typescript和Flow)进行整合。

4.0版本在发布前持续了公测了1个月,以便于让插件开发者能够更新插件,但不是所有插件都已经更新。开发者可以参照插件移植指南对插件和加载器进行更新。另外,如果开发者使用了流行的HTMLWebpackPlugin插件,应该参照发布博客获取打过补丁的版本。由于该插件的核心维护者已经离开,Webpack团队临时提供了一个兼容版本。

本次发布带来了另外一个重大提升是支持了多个头等模块类型,包括对WebAssembly的实验性支持。Webpack对WebAssembly的支持从2017年7月就已经开始,当时Webpack团队获得了Mozilla开源支持计划(Mozilla Open Source Support ,MOSS)的资助。在关于此次自助的公告中,Webpack团队的Sean Larkin制定了目标:

更进一步,我们希望用户可以在工程中添加任何Rust、C++、C文件,然后像使用JavaScript模块那样使用它们。

此次发布之后,这个目标已经开始实现。现在我们可以通过npm安装Rust加载器C++加载器,这已经支持了目标语言中的⅔。

归功于大幅度的性能提升,那些对新特性不感兴趣的开发者可能也会希望升级到Webpack 4.0。在一个非正式的twitter调查中,twitter用户Evan Scott报告了构建时间有74%的提升,从36801ms降低到了9632ms;而twitter用户Arkaitz Garro报告了有65%的提升,构建时间从42730ms降低到了15179ms。

Webpack 4.0的完整更新日志可以在发布说明上查看。需要注意的是此次发布将Webpack CLI拆分到了独立的webpack-cli包中,因此如果在构建系统之外使用,需要额外安装新的包。希望尝试Webpack 4.0的开发者可以通过npm i webpack webpack-cli --save-dev命令安装。

查看英文原文Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT