Vuex3.1.1更新：支持jsDelivr，修复内存泄漏

Posted 2021-04-16 前端之巅

作者 | Diogo Souza

译者 | 王强

javascript 已成为庞大、多样化并快速发展的编程语言。每当 JS 的框架或库发布更新，社区中与之相关的项目也会随之作出改进——Vue.js 及其附属项目就是典型例子。

Vuex 是简单直观的状态管理服务，但它的更新步伐是跟随 Vue.js 的，所以有时新版 Vue.js 的功能会迟一些才能获得 Vuex 的支持。

例如，原生移动应用已经广泛流行。许多 JavaScript 项目都有对应的库和框架等组件来开发应用。

和 Vue 类似，NativeScript-Vue 也是一个 NativeScript 插件，让开发者可以使用 Vue 来制作移动应用。Vuex 还可以与 NativeScript-Vue 集成，以便与组件的状态机一起使用，但它缺乏良好的调试机制。

Vuex 的 3.1.1 版本已经开始处理这个问题了。除了支持在 NativeScript 应用中调试Vuex 之外，这一版更新还有很多改进，例如纳入 jsDelivr CDN npm 包，并修复了模块注册的内存泄漏错误等。这个版本没有重大改动，所以升级项目时无需担心。

你可以查看更新日志 和官宣资料、贡献者提交内容来了解更多信息。下面我们具体看一下。

支持在 NativeScript 应用中调试 Vuex

Vue-remote-devtools 是使用 Vue.js 开发 NativeScript 应用的官方 Vue 开发工具应用。它基于 Node.js 和 Chromium，让开发者可以轻松调试 html/CSS/JS 应用（这里的例子则是 Vue）：

此外，vue-devtools 是一个用于调试基于 Web 的 Vue 应用的浏览器扩展，可以与 Vuex 及其状态管理库无缝集成，让开发者可以可视化之前的状态并在它们之间来回切换。这对所谓时间旅行调试的流程非常有用（例如，你可以在各个状态间进退自如）。

但对于 NativeScript 项目来说，这一版本之前是没有这个功能的。现在开发者可以在非浏览器环境下检查 Vuex 状态。如果你不太了解 Vuex 状态管理，可以参阅此处链接了解更多信息： https://vuex.vuejs.org/guide/state.html

相关链接：

vue-devtools： https://github.com/vuejs/vue-devtools

Vuex 状态 ： https://github.com/vuejs/vuex/pull/1404

为浏览器提供的新的缩小器和 ES 模块

在 ES 模块出现之前，开发者通常会将 JavaScript 代码像下面这样导入 HTML 页面：

<script ></script>
<script>
new Vue();
</script>

这种导入 JS 库的经典方法有一些缺陷：每次导入的顺序必须是正确的；如果顺序不正确，下面的脚本就会找不到依赖项。这种方法还将对象和函数暴露给了全局命名空间，因此任何人都可以访问并更改它们。此外你还可能犯导入文件两次的错误——缺陷还不止这些。

Vue 就遇到了这个问题。在 2.6 版之前，它在构建过程中没有专门在浏览器中加载 Vue 模块的步骤。所以下面这样的代码是不行的：

<script type=”module” src=”vue.esm.js”></script>

结果从 2.6 版开始，因为现在所有人都会在浏览器中使用 ES 模块，Vue 在构建流程中加入了这一步。

此外 Vuex 也面临相同的问题，但到了 3.1.1 版本才得到解决。现在要将 Vuex 直接导入浏览器，只需使用：

<script type=”module” src=”vuex.esm.browser.js”></script>
// Or below for the min version
<script type=”module” src=”vuex.esm.browser.min.js”></script>

此外该版本还加入了名为 Terser 的新的缩小器。这是因为之前的缩小器 UglifyJS 不再维护了，而且后者只支持 ECMAScript 5，而 Terser 支持 ES6+。

对于开发者来说这没什么区别。另外，因为 Terser 是 UglifyJS 的一个分支，所以它保持了对 uglify-es 和 uglify-js@3 的 API 和 CLI 兼容性的支持。

相关链接：

Terser： https://github.com/terser-js/terser

支持 jsDelivr

jsDelivr 比大多数 CDN 都快得多（详细对比见下方链接）。现在，你还可以从 jsDelivr 导入 Vuex 3.1.1。

相关链接：

CDN 性能分析和对比： https://www.cdnperf.com/

修复注册/ 注销模块时内存泄漏问题

模块可以把我们的商店分成更小和更可控的部分，因为整个状态包含在 Vuex 中的一个大对象里。要在商店中添加或删除模块，我们只需要分别调用 store.registerModule 或 store.unregisterModule 即可。

但在大型应用中管理浏览器内存可能有点棘手。 这有一个已知问题，需要一个应用程序添加数百个模块并在之后立即取消注册，这导致堆内存未被清除。 你可以想象下一步会发生什么...... 内存泄漏。

这一版的修复会简单地在函数 resetStoreVM 中对 oldVm 实例做垃圾回收，该函数负责在高峰期活动之后恢复 vm。

小结

完整更新列表可参阅此处（其中还有之前版本的更新介绍）： https://github.com/vuejs/vuex/releases

如果你希望了解有关 Vuex 的更多信息，请参阅其官方入门指南： https://vuex.vuejs.org/guide/

英文原文： https://blog.logrocket.com/whats-new-in-vuex-3-1-1-d796b0c791bf

 课程推荐

前端领域的技术演进一直要比其他技术快一些，这给前端工程师带来持续的挑战。这里整理了从 Vue 到 React、ios 到 Andoid、再到前端架构体系的干货课程，带你解读从前端小工到专家的实战心法，高效解决 80% 的开发难题。