使用 webpack 3 构建高性能的应用程序

几天前,我有幸升级了我们项目的 Webpack 构建,因为我们要努力改进应用程序的性能。 最大限度的压缩 Webpack 构建包,无疑给我们带来了显著的改进。

在这里,我将尝试分享一些参考指南,可以帮助你更好地了解 Webpack 配置,并为你正在进行的项目找到一种最佳设置。

注意: 我仅在下面的示例中显示了部分代码,但请注意,插件配置的顺序对于其中一些可能至关重要。本文的底部包含了全部要点。

迁移 webpack 版本

如果您仍在考虑是否升级你的 webpack 1 ,我会告诉你 – 肯定升级。v1 → v2 可能有点麻烦,但 v2 → v3 在98%的情况下可以平滑升级(根据Webpack的团队统计)。

单靠迁移将提高捆绑包的性能并显著降低文件大小。我们在 v2 中获得了 tree shaking 功能,而在 v3 中获得了 作用域提升(scope hoisting)。第一个来自 v2 的内置功能,但是 作用域提升(scope hoisting)需要在 v3 中使用 ModuleConcatenationPlugin 来启用。
继续阅读

为 Progressive Web App 提供的 Webpack 加载器和插件

我假设你已经知道什么是 Webpack ,为什么它真棒,它是如何工作的,所以让我们开始:

可能你已经知道了 Webpack 的这些常用的工具,比如: style-loaderhtml-webpack-pluginextract-text-webpack-pluginfile-loader 和其他流行的一些加载器或插件。 继续阅读