最近在使用 uni-app 开发跨端的小程序。开发的源代码转译成为微信小程序,并且在使用微信开发者工具的时候,预览、上传都没有遇到什么问题。
但是在字节开发这工具中,就会遇到预览时遇到体积超标的错误,导致上传代码的失败。
在社区帖子里搜索了几个帖子发现,包体积问题 和 关于超过包大小的问题 中都提到了类似的问题。
这里有个关键点,在开发阶段,uni-app 转译的产物代码对于不同的平台,有差别。
猜想
为了检验猜测,通过 uni-app 的文档 创建了一个 “新闻资讯” 的模板项目。
分别执行 npm run dev:mp-toutiao 和 npm run dev:mp-weixin ,然后检查 dist/dev 下的产物状态。
可以看出,微信小程序产物中多了一个独立的 sourcemap 文件夹,真实产物体积比字节小程序体积少了近 700 K 。
那么问题来了,字节小程序产物的那部分 sourceMap 去哪里了?
答案就是 inline-source-map 了。
Webpack 的 devtools 有一些 解释 可以拓展阅读。
对比文件搜索结果,微信小程序的产物中 sourcemap 是引用了独立 sourcemap 文件夹中的文件,而字节小程序的产物中,sourcemap 就是内联形式存在产物文件中了。
对比一下 NODE_ENV=production 时两者产物结果,体积相差不多,且都没有产生独立的 sourcemap 文件夹。
寻因
那么,是什么因素导致的产物形态不同呢?
产物不同的原因是 webpack 构建时配置项不同,所以要对比开发阶段,两者的配置项差异在哪里。
以 MacOS 系统为例,在 uni-app 的项目根目录下,
- 执行 NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service inspect > config.tt.js 来得到字节小程序的构建配置项。
- 执行 NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service inspect > config.wx.js 来得到微信小程序的构建配置项。
- 执行 code --diff config.tt.js config.wx.js 来进行文件差异对比。
简单观察能够发现为下图中显示的关于 sourcemap 配置有明显差异。
解决
假如字节小程序也使用微信小程序的配置项,就可以达到同样的产物结果。
因此,在项目根目录下中增加 vue.config.js ,修改 `vue-cli-service` 的配置。
// @ts-check
const webpack = require('webpack');
const sourceMap = require('@dcloudio/uni-cli-shared/lib/source-map');
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: (c) => {
// 仅针对开发环境做处理
if (process.env.NODE_ENV !== 'development') {
return {};
}
const x = c.plugins.findIndex(p => p instanceof webpack.SourceMapDevToolPlugin);
// 删除掉可能存在的旧的配置
if (x > -1) {
c.plugins.splice(x, 1);
}
// 新增一个新的配置
return {
plugins: [sourceMap.createSourceMapDevToolPlugin(true)],
};
},
};
// 部分边界情况可能没有兼容,上述代码仅作示例
在修改配置项之后执行 npm run dev:mp-toutiao ,得到的产物结果如下图所示。可以说,跟微信小程序产物十分一致了。
考虑到 inline sourceMap 本身是通过 base64 编码后得到的字符串,比原有 source map 文件要大的。所以,当代码量很大时,这一步的改变带来的体积收益是非常可观的。
现在,通过 uni-app 开发字节小程序的时候,再也不会遇到预览上传失败的问题了。 耶~
PS:这图片压缩的也太厉害了吧。。。