字节小程序
开发者社区
小程序小游戏
登录
uni-app 的产物体积踩坑记录

uni-app 的产物体积踩坑记录

1548浏览作者: mixue_icecream_tea

最近在使用 uni-app 开发跨端的小程序。开发的源代码转译成为微信小程序,并且在使用微信开发者工具的时候,预览、上传都没有遇到什么问题。

但是在字节开发这工具中,就会遇到预览时遇到体积超标的错误,导致上传代码的失败。

在社区帖子里搜索了几个帖子发现,包体积问题关于超过包大小的问题 中都提到了类似的问题。

这里有个关键点,在开发阶段,uni-app 转译的产物代码对于不同的平台,有差别。

猜想

为了检验猜测,通过 uni-app 的文档 创建了一个 “新闻资讯” 的模板项目。

分别执行 npm run dev:mp-toutiaonpm 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 的项目根目录下,

  1. 执行 NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service inspect > config.tt.js 来得到字节小程序的构建配置项。
  2. 执行 NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service inspect > config.wx.js 来得到微信小程序的构建配置项。
  3. 执行 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:这图片压缩的也太厉害了吧。。。

最后一次编辑于 2022年02月28日
加载中