也谈 cf 的 npm 代理 以及 uniapp vendor.js 压缩

💡 原文中文,约7900字,阅读约需19分钟。
📝

内容提要

本文讨论了小程序的包体积和npm源问题。通过更换npm源解决了安装插件的问题。介绍了使用compression-webpack-plugin插件压缩js文件和压缩图片体积来解决uniapp小程序打包体积过大的问题。压缩后的gz文件无法加载,最终通过压缩图片体积实现整体体积压缩。分享了自建的npm镜像地址。

🔎

延伸解读

npm 源选择与版本安装的坑

作者在自建 npm 源上安装指定版本插件时遇到 FETCH_ERROR,错误提示 JSON 解析异常。切换到 npm 官方源后问题解决。这提醒我们,自建代理源可能因缓存或响应格式问题导致特定版本安装失败,遇到类似错误时可尝试切换官方源排查。

compression-webpack-plugin 的版本兼容性

在 uniapp 项目中使用 compression-webpack-plugin 时,直接安装最新版会报 tapPromise 错误,需降级到 6.1.1 并搭配 webpack 4.46.0。安装后提示的 npm audit fix --force 不要运行,否则会再次引发错误。版本匹配是配置成功的关键。

gzip 压缩对小程序的实际效果

插件将 js 压缩为 .gz 文件,但小程序无法直接加载这种格式,若删除源文件还会导致报错。作者发现 vendor.js 体积降到 1M 以内其实是 uniapp 自身配置的功劳,而非该插件。因此,对小程序而言,gzip 压缩可能并无实际意义。

小程序包体积优化的可行方向

作者最终通过压缩图片体积实现了整体包体积的减小。文章提到常规方法还包括分包、图片资源上 CDN 等。对于 uniapp 小程序,这些传统手段可能比配置 gzip 压缩更直接有效。

❓

Q&A

如何解决uniapp小程序的包体积过大的问题?

可以通过使用compression-webpack-plugin插件压缩js文件和图片体积来减小uniapp小程序的打包体积。

更换npm源有什么好处?

更换npm源可以解决安装插件的问题,确保能够顺利安装所需的依赖包。

为什么压缩后的gz文件无法被小程序加载?

小程序无法加载gz文件,压缩体积的意义在于减小文件大小,但仍需使用可加载的文件格式。

如何配置compression-webpack-plugin插件?

需要在vue.config.js文件中配置compression-webpack-plugin,设置压缩文件类型和阈值等参数。

自建的npm镜像地址是什么?

自建的npm镜像地址是https://npm.obaby.blog。

使用compression-webpack-plugin时遇到的常见错误有哪些?

常见错误包括TypeError: Cannot read properties of undefined,通常与插件版本或配置不当有关。

🏷️

标签

➡️

继续阅读