写点什么

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:002612

评论

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

flutter系列之:flutter中的变形金刚Transform

程序那些事

flutter 程序那些事 6月月更

剑指 Offer 65. 不用加减乘除做加法

未见花闻

6月月更

Java Core「18」JCF 及常见问题

Samson

学习笔记 Java core 6月月更

攻防演练中蓝队针对攻击方式复盘总结

穿过生命散发芬芳

6月月更 攻防演练

云原生运维文章计划

boaker

运维 云原生

50行代码串行Promise,koa洋葱模型原来是这么实现?

若川

JavaScript 前端 Node Jest koa2

从小到大为何一谈学习就愁眉苦脸

宇宙之一粟

学习 6月月更

企业架构师面试的100个问题

涛哥 数字产品和业务架构

企业架构师

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

若川

JavaScript Vue 前端 前端开发

【使用Python实现算法】01 语言特性

★忆先★

Python 算法 算法题

Flutter SliverAppBar全解析,你要的效果都在这了!

yechaoa

flutter android 6月月更 SliverAppBar

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的

若川

JavaScript Vue 前端 前端开发 vuex

linux检测系统是否被入侵(上)

入门小站

Linux

K8S学习笔记--《容器化的应用:会了这些你就是Docker高手》

IT蜗壳-Tango

IT蜗壳教学 6月月更

深入理解 Jetpack Compose SlotTable 系统

fundroid

android Compose android jetpack SlotTable gap buffer

去哪儿网(Qunar) DevOps 实践分享

laofo

DevOps cicd 研发效能 持续交付 工程效率

在线JSON转PlainText工具

入门小站

工具

每次新增页面复制粘贴?100多行源码的 element-ui 新增组件功能告诉你减少重复工作

若川

JavaScript Vue 前端 Element Element UI

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

若川

JavaScript 前端 前端开发 Node

不得利用算法从事垄断行为:防范利用算法和大数据进行杀熟

石头IT视角

Java中数组参考指南

okokabcd

Java’

怎样能低成本构建一个电商平台

Geek_99967b

小程序 电商

信通院举办“业务与应用安全发展论坛” 天翼云安全能力再获认可

极客天地

新手向:前端程序员必学基本技能——调试JS代码

若川

JavaScript 前端 前端开发 调试 Node

自定义MySQL连接池

FunTester

SpringBoot-入门

zarmnosaj

6月月更

为什么 Vue2 this 能够直接获取到 data 和 methods,源码揭秘

若川

JavaScript Vue 前端 前端开发 源码解析

云厂商为什么都在冲这个KPI?

脑极体

Docker 化 Vue2 应用开发

devpoint

Docker Docker 镜像 6月月更

从22行有趣的源码库中,我学到了 callback promisify 化的 Node.js 源码实现

若川

JavaScript node.js 前端 前端开发 Node

【使用Python实现算法】02 原生类型与内置函数

★忆先★

Python 算法题

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