PWA 使用 Vuejs 和 webpack：如何缩小服务工作者代码？

Question

我正在编写一个基于 Vuejs 的 PWA，并使用 webpack 作为打包器。我也在使用：

• Terser 缩小/修改源代码
• Google Workbox 帮助服务人员
• 其他一些 webpack 插件用于复制我的 service worker 需要的代码，并从 service worker 不支持的 import/export 语句中清除它

现在我想缩小和修改服务工作者使用的代码，因为令我惊讶的是，默认情况下没有这样做。关于如何进行的任何线索？我找不到将 Terser 应用于服务工作者代码的任何地方，而且我对 webpack 还是很陌生...

Answer 1

我最终编写了自己的 Webpack 插件。该插件将：

1. 在任何其他插件之前激活
2. 收集 Vue 环境变量 (provcess.env.VUE_APP_*)
3. 将服务工作者所需的所有文件和环境变量合并在一起（而不是使用ImportScripts）。单独修改文件是行不通的，因此需要执行此步骤。
4. 在合并的文件上运行 Terser。
5. 将结果复制到公用文件夹，以便 Webpack 正常构建过程拾取它。

清理完代码我会推送到这里....