【第1186期】Webpack v4 beta 版本发布
前言
昨天期号忘记带了,不认真了。今天童鞋们,又该学习了。今日早读文章由@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
性能提升
在 production 环境中,Webpack 将自动使用 UglifyJS 插件来并行化编译和缓存来减少工作量。
将插件系统提升到一个新的版本,以保证事件钩子 Event Hooks 和事件处理函数 Event Handlers 是单一形态的。
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 代码
javacript/auto : 从 CommonJS,AMD,ESM 模块系统中提取 JavaScript 代码。
javascript/esm : 从 EcmaScript 模块系统中提取 JavaScript 代码。
javascript/dynamic : 只支持从 CommonJS 模块系统中提取 JavaScript 代码。
json : 支持从 .json 文件中提取 JavaScript 代码。
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学位课程第五期招生正在火热进行中!
感兴趣的小伙伴快扫描下方二维码了解课程详情吧!