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

打包优化需求

用 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 端是无效的。