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



我正在编写一个基于Vuejs的PWA,并使用webpack作为bundler。我也在使用:

  • Terser缩小/篡改源代码
  • 谷歌Workbox帮助服务人员
  • 一些其他的webpack插件来复制我的服务人员需要的代码,并从服务人员不支持的import/export语句中清除它

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

我最终编写了自己的Webpack插件。此插件将:

  1. 在任何其他插件之前激活
  2. 收集Vue环境变量(provcess.env.VUE_APP_*(
  3. 将服务工作者所需的所有文件+环境变量合并在一起(而不是使用ImportScripts(。单独处理文件是行不通的,因此这一步
  4. 对合并的文件运行Terser
  5. 将结果复制到公用文件夹中,以便通过Webpack正常构建过程获取结果

一旦清理干净,我会把代码推到这里。。。。

最新更新