uniapp - vendor.js 过大的处理方式

3,563 阅读2分钟

1. vendor.js 过大的处理方式

小程序工具提示vendor.js过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为vendor.js已经是es5的了。

关于体积控制,参考如下:

  • 使用运行时代码压缩

    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码

    • cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

      image.png

  • 使用分包优化,关于分包优化的说明

# 来自uniapp官方文档

2. 组件、静态文件配置

以上除了配置开发者工具压缩以外,还需要将主包用不到的组件进行清理。

- 删除主包无用组件: 主包、子包没有引用到,使用到的组件,可以直接删除
- 添加子包组件:子包用到的组件,单独放入子包中,并且按需引入
- 静态文件:仅子包用到,主包用不到的静态文件,移入子包文件中
- 图片文件:使用字体图标,建议只使用1种,因为字体图标过大很难做到清除。 尽量非tabbar的图片都放入服务器中,若为必要图片,检查图片是否过大,过大则重新引入

3. 子包打包配置优化

然后,主包大小明明已经尽量缩小了,删除无用组件,把子包用到的组件,单独放入子包中,并且按需引入。可以预览,但是上传的时候总会报: 文件大小超出2MB, 主要的vendor.js自己就已经将近1.8mb, 组件也已经不能再进行缩减了,为什么vendor还这么大呢?

原因:在项目文件夹查看项目打包后的根目录下的common文件夹里的vendor.js,你会发现它变大了,为什么会变大,原来是它把分包的依赖也给打包进去了,比如你在分包使用require引入的给打包到vendor.js里了,这就是导致明明主包都没有超过2M,打包后却超过的原因。

解决方案manifest.json,在“mp-weixin”里添加代码


"optimization":{
        "subPackages":true
}

3. 其他

如果项目文件还是过大,建议通过开发者工具进行代码分析,查看是否有些文件是否过大,另外,注释也影响代码大小,减少非必要注释,也可以缩小文件大小。

去重: 抽离页面冗余代码,删除非必要注释,重复代码封装。

复用: 样式是最容易影响项目代码大小。建议使用sass,通过minxin或者封装公共样式进行优化。

image.png