查看原文
其他

【第1186期】Webpack v4 beta 版本发布

2018-02-01 FEPulse 前端早读课

前言

昨天期号忘记带了,不认真了。今天童鞋们,又该学习了。今日早读文章由@FEPulse 授权分享。

正文从这开始~

自从Webpack 3 发布之后,Webpack 社区承诺将用一个更长的开发周期来准备下一个重要版本,因此从去年 8 月份开始拉取下个版本的分支之后,大家都在期待经过如此隆重的开发,Webpack 下个版本会增加哪些新提升?就在昨天 Webpack 社区发布了 Webpack v4.0.0-beta.0 版本,小编在这里带大家先睹为快吧。

如何安装 Webpack v4.0.0-beta.0
yarn add webpack@next webpack-cli —dev
或者
npm install webpack@next webpack-cli —save-dev

性能提升

  1. 在 production 环境中,Webpack 将自动使用 UglifyJS 插件来并行化编译和缓存来减少工作量。

  2. 将插件系统提升到一个新的版本,以保证事件钩子 Event Hooks 和事件处理函数 Event Handlers 是单一形态的。

  3. Webpack 放弃对 Node v4 的支持以支持大量 ES6 语法和数据结构。

更好的默认配置-零配置

例如 Webpack 4 将自动默认设置为 entry 是 ./src/, output 是 ./dist,官方也声明在 4.x 和 5.0 版本将继续优化默认配置。

更好的默认配置-环境模式

必须从 production 和 development 两种模式选择其中一个,生产环境更加关注优化你的项目产出,而开发环境则优化开发速度和开发体验。

SideEffects 选项

Webpack v4 支持 sideEffects: false 设置来优化导出的依赖包,例如 Lodash-es 从 ~223 KiB 的花销降低到 ~3 KiB。

支持JSON并删减模块树

Webpack 能够对 JSON Module 进行分析并删减其中无用的部分。

更新 UglifyJS2

意味着你可以使用 ES6 语法在编译器之前对代码进行优化。

模块类型引入 .mjs

Webpack 4 引入五种模块类型来支持从代码中提取 JavaScript 代码

  1. javacript/auto : 从 CommonJS,AMD,ESM 模块系统中提取 JavaScript 代码。

  2. javascript/esm : 从 EcmaScript 模块系统中提取 JavaScript 代码。

  3. javascript/dynamic : 只支持从 CommonJS 模块系统中提取 JavaScript 代码。

  4. json : 支持从 .json 文件中提取 JavaScript 代码。

  5. webassembly/experimental : 支持从 WebAssembly 模块系统中提取 JavaScript 代码。

支持 WebAssembly 字节码技术

WebAssembly 比 JavaScript 具有更好的性能,也使得能对 Rust,C++ 等 WebAssembly 语言能够添加相应的加载器 Loader 进行处理。

去除 CommonsChunkPlugin 插件

Webpack 4 去除了 CommonsChunkPlugin,取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk。

关于本文
作者:FEPulse@李隆隆
原文:https://mp.weixin.qq.com/s/ZWY_UDxaWvrlgHuIen7AMw

腾讯大牛亲自操刀制作的前端NEXT学位课程第五期招生正在火热进行中!
感兴趣的小伙伴快扫描下方二维码了解课程详情吧!

54 27500 54 14939 0 0 3377 0 0:00:08 0:00:04 0:00:04 3376

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存