也谈 cf 的 npm 代理 以及 uniapp vendor.js 压缩
内容提要
本文讨论了小程序的包体积和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,通常与插件版本或配置不当有关。