🍾🚀 webpack 3: 正式发布!! 🚀🍾

t0197b60310a50780ca

终于走到这里,太美了。

🍾🚀webpack 3 正式发布🚀🍾

作用域提升,“魔法注释”,以及更多新特性!


在发布了 webpack v2 之后,我们曾向社区做了一些承诺。我们承诺将会发布由用户票选出来的功能。此外,我们承诺发布周期会更快,更稳定

这次没有 beta 版本,完全向下兼容。我们承诺让你们——促进 webpack 成长的社区成员们——更轻松地使用。

webpack 团队自豪地宣布,今天我们发布了 webpack 3.0.0! 现在就可以下载或升级!

或者


从 webpack 2 迁移到 3,你只需要执行升级命令,而不需要修改任何代码。我们将这次升级标记为版本的重大升级,是因为内部的突破性变化可能会影响某些插件的使用。

到目前为止,98% 的升级的用户都没有遇到任何不兼容!

有哪些新特性?

上文已经提到,我们发布了一些由用户投票选出的功能,感谢 Github , 赞助商和我们的支持者,有了他们我们才能做出每一个改进。😍

🔬作用域提升(Scope Hoisting )🔬

作用域提升是 webpack 3 的重点功能。之前 webpack 在打包时,您的 bundle 中的每个模块都将被包装在单独的函数闭包中。这些闭包会使您的 JavaScript 在浏览器中执行速度更慢。相比之下,像 Closure Compiler 和 RollupJS 这样的工具可以将所有模块包装在一个大的闭包内,从而使您的代码在浏览器中具有更快的执行速度。

1497929168082

如今,使用 webpack 3,您现在就可以在配置中添加下面的插件以启用作用域提升

作用域提升是基于 ECMAScript 模块(Module)语法实现的一个特征。通过作用域提升,webpack 可以根据你正在使用的模块和一些其他条件来判断是否需要回退到普通的打包方式。

为了了解什么触发了这些回退,我们添加了一个--display-optimization-bailout cli标志,它将告诉你是什么导致的回退。

1497929229855

同时,由于作用域提升会移除模块外的函数包装,你可能会看到一些小的体积改进。然而,更显著的改进是 JavaScript 在浏览器中加载的速度。如果您在比较使用之前和之后时发现加载速度取得了非常棒的改进,请随时反馈一些数据,我们将很荣幸分享!

🔮 “魔法注释”(Magic Comments) 🔮

当我们在 webpack 2 中引入动态导入语法(import())的用法时,用户表示,他们不能像使用require.ensure一样创建命名代码块(chunk)。

我们现在介绍由社区创建的“魔法注释”,它可以传递代码块的名称,还有更多功能,例如可以添加更多的内联注释到import()语句中。

通过使用注释,我们能够在使用动态导入语法的同时,对代码块进行命名。

尽管这是我们在 v2.4 和 v2.6 中发布的技术特性,但在 v3 中,我们修复了这些功能的一些错误,使其变得更稳定。 现在允许动态导入语法具有与require.ensure相同的灵活性。1497929293139

要了解更多信息,请参阅我们最新文档的代码分割部分,新功能部分已经高亮!

😍 接下来做什么? 😍

我们有很多功能和增强功能想要推出!但我们需要了解用户需求的优先级。所以访问我们的投票页面,并提出你想看到的功能!

这些是我们希望能带给您的一些功能:

  • 更好地构建缓存
  • 更快的初始构建和增量构建
  • 更好的 TypeScript 体验
  • 改进长期缓存
  • WASM 模块支持
  • 改善用户体验

 

🙇 致谢 🙇

感谢我们所有的用户,贡献者,文档作者,博客,赞助商,支持者和维护者。是他们帮助我们确保 webpack 在未来几年成功。

为此,我们感谢所有人。webpack 发展到现在与你的支持密不可分,我们迫不及待地想要与你分享未来 webpack 的新进展!

没有时间帮助贡献? 想以其他方式回馈? 通过捐赠给我们的开放集体成为支持者或赞助商。 开放集体不仅有助于支持核心团队,而且还支持那些在花了大量空余时间帮助 webpack 进行改善的贡献者!❤

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部