一、问题描述

  • uniapp 项目运行至小程序,包很大超过2M,很无奈的做了分包,勉勉强强将主包控制到了2M以内。
  • 但是为什么这么大,刚开始,也没有找到原因。说白了,还是对打包不太了解。
  • 项目上线后,做优化,在微信开发者工具中,做了代码检查,有提示,说我的wxss文件中包含了大量没有引用的css,我打开一看,果然每一个生成的wxss文件中都存在我写的公共的css代码。
    解决:找文档,研究打包原理;

1. 下图是刚开始的目录结构:

在这里插入图片描述

2. 官网打包建议

  1. static 目录下的 js 文件不会被编译
  2. css、less/scss 等资源,建议公用的资源放在自建的 common 目录下。
  3. 运行时,要勾选压缩选项

在这里插入图片描述
在这里插入图片描述

参考文章:https://xssv.cn/351.html
uniapp 官网介绍:目录结构


### 3. css小建议 在uni.scss文件中,只存放变量即可,因为uni.scss文件中的代码,不是变量的样式会编译到每一个文件中,这样无意中增加了包的大小。

二、调整目录后对比

主包代码大小一下子少了 500kb !!!

调整后目录结构图:
在这里插入图片描述

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐