写点什么

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

  • 2018-03-19
  • 本文字数:1465 字

    阅读完需:约 5 分钟

看新闻很累?看技术新闻更累?试试下载 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

2018-03-19 19:002600

评论

发布
暂无评论
发现更多内容

2021年Java知识体系总结,部门老大:redis-分布式锁再这么用

策划Java工程师

Java 程序员 后端

2021最新Java面试真题解析!1

策划Java工程师

Java 程序员 后端

graphql计算指令之@filter:查询中实现集合过滤

杜艮魁

开源 后端 低代码 graphql

230页,看完之后你就会知道,原来Redis还能这么玩!

Java架构师迁哥

2021Java面经:Android屏幕适配-重点盘点

策划Java工程师

Java 程序员 后端

80后程序员感慨中年危机,如何设计一个优雅的RESTFUL的接口

Java 程序员 后端

从河南暴雨、疫情反弹看区块链“灾疫”治理

CECBC

2021Java笔试题总结!Java个人学习之旅(第十天)

策划Java工程师

Java 程序员 后端

2021程序员进阶宝典!《零基础(1)

策划Java工程师

Java 程序员 后端

Python代码阅读(第2篇):数字转化成列表

Felix

Python 编程 Code Programing 阅读代码

【最不佳实践】Serverless应用优化四则

刘宇

Serverless 优化

Java入门你值得拥有!天天都是面对对象编程,你真的了解你的对象吗

Java 程序员 后端

Java入门视频教程!Kotlin(2)-泛型与集合

Java 程序员 后端

2021年Java开发实战!仿微信的网络聊天室项目开发【完整源码讲解

策划Java工程师

Java 程序员 后端

3个月学会Java开发!Git-如何优雅地回退代码(1)

Java 程序员 后端

Java入门你值得拥有!浅谈Facade外观模式

Java 程序员 后端

网络攻防学习笔记 Day95

穿过生命散发芬芳

态势感知 网络攻防 8月日更

2021Java大厂面试集合,java多线程

策划Java工程师

Java 程序员 后端

2021金三银四,开发者进阿里必看的30道经典数据库面试题【附详细解析

策划Java工程师

Java 程序员 后端

graphql计算指令之@sortBy:查询中实现列表字段排序

杜艮魁

开源 后端 低代码 graphql

2021BTAJ面试真题详解,16条代码规范建议,快看看自己做到没

Java 程序员 后端

5分钟搞定!从Java底层分析多线程行为

Java 程序员 后端

防火墙 Keepalived 异常双活恢复后部分外网访问中断问题分析

Qunar技术沙龙

运维 防火墙 网络 故障诊断 keep-alive

Hologres揭秘:深度解析高效率分布式查询引擎

阿里云大数据AI技术

2021Java春招面试真题详解,Git-如何优雅地回退代码

策划Java工程师

Java 程序员 后端

2021年五面蚂蚁,从单体到分布式,必须解决的四个问题

策划Java工程师

Java 程序员 后端

Selenium 4以后,再不相见的API

FunTester

自动化 API selenium

15个经典面试问题,酸!校招进字节跳动

Java 程序员 后端

IBM大面积辞退40岁+的员工,瞧一瞧

Java 程序员 后端

带你使用FFMPEG将MP4视频文件转换为GIF

hanaper

解决方案|在线自习室

anyRTC开发者

音视频 在线教育 RTC RTM

Webpack 4.0 发布,带来配置简化、WebAssembly支持和性能提升_JavaScript_Kevin Ball_InfoQ精选文章