也谈 cf 的 npm 代理 以及 uniapp vendor.js 压缩
obaby发表于 2024-07-31 07:02:57
这两件事情，本质上区别还是蛮大的，一个是小程序的包体积问题，另外一个是 npm 源问题。但是这两件事情却又有千丝万缕的联系，不替换 npm 源就无法愉快的安装压缩插件，所以两件事情就写到了一起。
至于 npm 代理的问题，杜老师写了篇文章已经说的很清楚了，原文点击这里查看。
主要的就是worker 的那几行代码：
addEventListener(
"fetch", event => {
let url = new URL(event.request.url);
url.hostname = "unpkg.com";
url.protocol = "https";
let request = new Request(url, event.request);
event.respondWith(
fetch(request)
)
}
)
so easy 对不对？
然鹅，这个 npm 源个人感觉有问题，在指定包的版本号之后就无法安装了，提示下面的错误：
zhongling@zhonglingdeMacBook-Pro ~ % npm config set registry https://npm.obaby.blog zhongling@zhonglingdeMacBook-Pro ~ % npm install compression-webpack-plugin@6.1.1 npm ERR! code FETCH_ERROR npm ERR! errno FETCH_ERROR npm ERR! invalid json response body at https://npm.obaby.blog/compression-webpack-plugin@11.1.0/dist/index.js reason: Unexpected non-whitespace character after JSON at position 12 npm ERR! A complete log of this run can be found in: /Users/zhongling/.npm/_logs/2024-07-31T02_19_03_318Z-debug-0.log
刚开始以为是代理代码的问题，尝试换其他代码依然如此。问题是这几行代理的代码是如此简单，凭直觉感觉也不是代码的问题啊。
猜测可能是源的问题，尝试换 npm 的官方源，https://registry.npmjs.org 再次部署之后，就 ok 啦。cf 的速度，个人感觉还是蛮 ok 的。
worker 代码：
addEventListener(
"fetch", event => {
let url = new URL(event.request.url);
url.hostname = "registry.npmjs.org";
url.protocol = "https";
let request = new Request(url, event.request);
event.respondWith(
fetch(request)
)
}
)
设置npm 源：
npm config set registry https://npm.obaby.blog
安装插件：
zhongling@zhonglingdeMacBook-Pro ~ % npm install compression-webpack-plugin@6.1.1 npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs added 53 packages, removed 11 packages, changed 5 packages, and audited 133 packages in 18s 16 packages are looking for funding run `npm fund` for details found 0 vulnerabilitiesd
到这里 npm 的问题就算是解决了，另外一个问题就是 uniapp 小程序打包的问题，首先来看下包的体积：
很好，很丰满，一个 vendor.js 已经超过了 2.5M，这尼玛就离谱啊，一个小程序主包体积最大才 2M，这尼玛能上传？
于是想到了之前在 linyufan 那里看到的《uniapp分包后，打包vendor.js过大的问题解决方案》，说实话，虽然想到了可能是在他这里看到的，但是找文章的过程颇为曲折，在他的网站没有搜索，也没有归档之类的，全凭记忆找？太累了。于是从网上搜索 verdor.js 过大的问题的解决方案。
最终看到了几篇文章，感觉应该是说的同一件事情，通过compression-webpack-plugin插件压缩 js 文件。例如这篇文章：https://blog.csdn.net/weixin_44690156/article/details/123544820
安装插件：
npm i compression-webpack-plugin npm i webpack
插件安装好之后，配置压缩。新建vue.config.js文件：
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css']
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
// filename: "[path][base].gz",
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名
threshold: 102400, //对10K以上的数据进行压缩
minRatio: 0.8,
deleteOriginalAssets: false, //是否删除源文件
// deleteOriginalAssets: true, //是否删除源文件
})
]
}
}
但是此时便于运行会报下面的错误：
09:18:12.964 正在编译中... 09:18:14.428 ERROR TypeError: Cannot read properties of undefined (reading 'tapPromise') 09:18:14.436 TypeError: Cannot read properties of undefined (reading 'tapPromise') 09:18:14.437 at /Users/zhongling/node_modules/compression-webpack-plugin/dist/index.js:372:39 09:18:14.447 at SyncHook.eval [as call] (eval at create (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1) 09:18:14.454 at SyncHook.lazyCompileHook (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/Hook.js:154:20) 09:18:14.464 at Compiler.newCompilation (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Compiler.js:630:30) 09:18:14.465 at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Compiler.js:667:29 09:18:14.474 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) 09:18:14.481 at AsyncSeriesHook.lazyCompileHook (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/Hook.js:154:20) 09:18:14.488 at Compiler.compile (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Compiler.js:662:28) 09:18:14.489 at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Watching.js:77:18 09:18:14.497 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) 09:18:14.504 at AsyncSeriesHook.lazyCompileHook (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/tapable/lib/Hook.js:154:20) 09:18:14.514 at Watching._go (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Watching.js:41:32) 09:18:14.515 at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Watching.js:33:9 09:18:14.521 at Compiler.readRecords (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Compiler.js:529:11) 09:18:14.531 at new Watching (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Watching.js:30:17) 09:18:14.537 at Compiler.watch (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/Compiler.js:244:10)
重新制定版本号安装插件：
npm install compression-webpack-plugin@6.1.1 npm i webpack@4.46.0
安装之后可能会提示下面的信息：
npm WARN deprecated move-concurrently@1.0.1: This package is no longer supported. npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated figgy-pudding@3.5.2: This module is no longer supported. npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated copy-concurrently@1.0.5: This package is no longer supported. npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated fs-write-stream-atomic@1.0.10: This package is no longer supported. npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies added 292 packages, removed 30 packages, changed 25 packages, and audited 395 packages in 42s 32 packages are looking for funding run `npm fund` for details 9 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
千万不要运行提示的npm audit fix –force。否则会继续报上面的错误。
然而，在重新打包运行之后，我却有点困惑了，这个插件把 js 压缩成了 gz 文件。
但是这个压缩后的 gz 文件和西小程序有神马关系？本质上小程序还是无法加载这个 gz 文件啊？那压缩体积的意义是什么？
上图看到的 js 体积到了 1m 以内，并不是通过插件实现的，而是 uniapp 的配置选项压缩的。
所以，我折腾了半天配置了 npm，安装了压缩插件，那最后压缩的这些文件有神马用呢？如果配置删除源文件deleteOriginalAssets: true, //是否删除源文件 ，小程序就直接报错了，所以这个压缩是压缩了个寂寞？问题是还能搜索到一大堆配置这个东西的文章，配置完了，对于小程序的压缩也没啥用啊。还是我的方法不对？
最终还是通过压缩图片体积来实现的整体体积压缩，常规方法就不说了，不外乎分包、图片资源上 cdn之类的等等。不过要想解决这个问题，还是得靠传统常规方法，谁知道这个压缩成 gz 之后再怎么给小程序使用还望不吝赐教。
自建 npm镜像地址：
https://npm.obaby.blog