首页 h5开发 正文内容

uni-app 开发 H5 打包时,如何过滤没使用的资源

2023年09月06日 , 560

打包 H5 体积太大怎么办?本文介绍 uni-app 内置的摇树优化功能的使用方法。

打包优化需求

用 uni-app 开发 web 应用,在项目打包发布时,发现打包体积很大,超过 2 MB,这个体量在 web 应用中是偏大的。项目如果正式发布,用户访问时加载很慢,这种情况下应该怎么样优化打包大小呢?

需求分析

通过对项目打包后的文件进行分析,发现这是一个非常大的 runtime,包含了几十个内置组件,数百个API。很多是 uni-app 为我们提供的内置 API,这些 API 方便了我们开发调用,提高了开发效率,也是导致打包体积偏大的主要原因。所以这是一个行业通用的难题,在提高效率的同时,必然会导致冗余代码从而拉低了性能。

解决方法

其实在 uni-app 在 2.2 版本以后,就专门优化了 H5 端的性能,其中就有对打包的专门优化。那就是摇树优化机制,简单地说,就是像一棵树一样,把枯枝败叶都给要下来,以免再消耗养分。uni-app 的摇树机制就是自动分析我们代码中使用的 API,把大部分没有用到的代码都给过滤了,从而减少打包体积。

具体操作方法也很简单,在 uni-app 项目中 manifest.json 文件中配置,找到 h5 节点,添加 optimization 节点信息,完整的配置代码如下:

"h5": {
    "optimization": {
        "treeShaking": {
            "enable": true
        }
    }
}

优化效果

这样就会开启摇树优化机制,项目发布到 H5 时,自动过滤没有使用的资源,完全不需我们去手动处理。举个例子,我写的一个小项目,未摇树优化前的 uni-app 整体包体积约 800 KB,服务器部署 gzip 后 192 KB,效果非常不错。

注意事项

注意摇树优化配置只能在 H5 打包时有效,发布到小程序、APP 端是无效的。