@@ -1,58 +0,0 @@ 微信小程序(uniapp)-包大小优化 | 凤凰涅槃进阶之路

微信小程序(uniapp)-包大小优化

Abel sun2022年12月24日约 714 字大约 2 分钟

微信小程序(uniapp)-包大小优化

1. 背景

在开发微信小程序的过程中,随着业务逻辑日渐庞大之后,突显了一些问题。

首先我们发现在 dev mode 时,本地包大小已经达到了 4m+,这种情况下,已经无法在 dev mode 使用真机调试了。

其次此时,小程序 build 后也有 1.8M 左右。而且后续还有相当多的业务需求需要开发,包大小肯定会更大。

这时候就想要优化小程序包大小。下面分享一下我的定位过程和解决思路。尽管我们使用 uni-app 开发,但思路是通用的,希望能给大家一些帮助吧。

2. 如何减小包大小

2.1 代码分析(包大在哪儿)

首先分析包大在哪儿了。

打开本地代码目录查看文件大小。可以发现 common/vendor.js 和 page,components 中 js 占了大部分。

在 build 编译模式下,代码压缩已经启用了,需要思考别的优化方式。这时候可以使用webpack-bundle-analyzer插件open in new window。它可以帮助分析 vendor.js 中都有哪些 js 模块,哪些模块比较大,以便我们进一步优化代码

2.2 分包

小程序分包open in new window也是一种常规的优化方案。

通过分析后,可以将一些较大的页面划分为子包。如果有单页依赖第三方自定义组件,而且第三方组件还挺大,也可以考虑将该页面划分为子包。也因此尽量避免将第三方自定义组件放在 globalStyle,不然没法将它放到子包去。

2.3 大图不要打包

小程序中的大图,尽量避免打包进来,应该放到 CDN 通过 url 加载。我们的做法是在开发时加载本地图片,在 CI/CD 环节自动化发布图片,并改写地址。

3. 如何解决真机调试问题

首先还是查看编译后的文件,发现common/vendor.js巨大,足有 1.5M。其次pagescomponents也有 1.4M,而这其中占了 js 的大小又占了绝大部分。

为什么 js 文件这么大呢?主要是因为在 dev mode 默认并没有压缩,当然也没有 tree shaking。

我的选择是修改编译配置,在 dev mode 压缩 js 代码。本地代码减少到了 2M。预览大小则是减少到了 1.4M。参考配置如下:

// vue.config.js
    configureWebpack: () => {
        if (isDev && isMp) {
            return {
                optimization: {
                    minimize: true,
                },
            }
        }
    }

这看上去并不是个好方案,但确实简单有效。也考虑过分包,但分包并不能解决 common/vendor.js 巨大的问题,预览时包还是很大。

参考文章

小程序包大小优化(uni-app)open in new window

评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.9.1