weappmin
v1.0.0
Published
一款为压缩小程序容量而生的小程序代码精简压缩器
Downloads
22
Maintainers
microkofReadme
weappmin
一款为压缩小程序容量而生的小程序代码精简压缩器。
A miniprogram reduction compressor.
软件功能
精简小程序第三方组件库
先说明两个概念：
直接组件：usingComponents 字段里填写的组件
依赖组件：直接组件依赖的其他组件
weappmin 会精简第三方组件库中用不到的组件，只保留直接组件和它们的依赖组件，工作原理是：先从项目的多处 .json 文件中抓取 usingComponents 字段的直接组件，计算各个直接组件的依赖组件，之后从
./node_modules/目录的第三方组件库拷贝必需的直接组件和依赖组件到./wxcomponents/（也可能是其他./xxcomponents/）目录。压缩 uni-app 项目的 ./unpackage/ 下的 .js 和各家小程序平台的 CSS 文件，如 .wxss 文件
由于小程序开发者工具在使用工具栏的“预览”功能时不压缩代码（原因估计是为了节省时间），可能导致代码容量超限，比如可能会遇到
/common/vendor.js超容量的提示，为解决此问题，weappmin 提供压缩代码文件的功能，只针对./unpackage/dist/dev/目录下的 JS 和 CSS 文件。压缩 uni-app 或原生项目的 ./static/ （或其他目录）下的 .jpg/.jpeg/.png/.svg 文件
高保真前提下压缩图片文件，属于常见需求，不多解释。
精简组件库功能的支持范围
支持的操作系统：Windows、MacOS
支持的开发模式：uni-app 小程序、原生小程序，暂不支持 Taro，下个大版本开始支持
支持的第三方组件库（如有组件库提供 ES6 和 ES5 双版本的，只取 ES5 版本）：
微信小程序、QQ 小程序组件库：
@vant/weapp ☆☆☆☆☆ 推荐
iview-weapp ☆☆
kai-ui ☆☆
wuss-weapp ☆☆☆
wux-weapp ☆☆☆☆ 推荐
支付宝、淘宝、钉钉小程序组件库：
- mini-ali-ui ☆☆☆☆ 推荐
weappmin 官方网站
https://www.npmjs.com/package/weappmin
安装 weappmin
强烈建议 yarn 仓库先切换成淘宝镜像再安装：yarn config set registry https://registry.npm.taobao.org
开始安装：yarn add -D weappmin
如果卡在安装 mozjpeg 上，你有两种选择：
继续等待安装，5 分钟内有一定概率安装成功，一定概率安装失败
当场结束安装，改用命令
yarn add -D weappmin --ignore-scripts，会立即安装成功
安装第三方组件库
yarn add <第三方组件库名>，例如 yarn add @vue/weapp。
请按照第三方组件库的要求做必要的配置。
注意事项一：不要使用“构建 npm”功能
绝对不要使用开发者工具的“构建 npm”功能，即使第三方组件库官方要求，也不要听从，只需做完 yarn add <第三方组件库名> 这一步即可。
注意事项二：遵守 uni-app 规范和 weappmin 规范去配置 usingComponents 字段
无论 uni-app 开发还是原生开发，usingComponents 字段的路径都统一按照 uni-app 的路径规范，见 (https://uniapp.dcloud.io/frame?id=小程序自定义组件支持)[https://uniapp.dcloud.io/frame?id=小程序自定义组件支持]。抄录如下：
| 平台 | 存放目录 | | ------------------------ | -------------- | | 微信、QQ 小程序 | wxcomponents | | 支付宝、淘宝、钉钉小程序 | mycomponents | | 百度小程序 | swancomponents | | 字节跳动小程序 | ttcomponents | | 快手小程序 | kscomponents |
格式："<组件标签>": "/<平台目录>/<第三方组件库名>/<组件名>"
例如："van-picker": "/wxcomponents/@vant/weapp/picker"
解释：
/wxcomponents事实上只是 uni-app 官方规定的存放规范，不是原生项目的规范，但是，为统一起见，无论 uni-app 开发还是原生开发，你都应遵守上方表格规范。/@vant/weapp是 weappmin 的规范，这里必须写成/<第三方组件库名>的格式，也就是照抄组件库名，以便 weappmin 识别组件库。注意，@vant/weapp虽然中间有/，但是它确实是组件库的名字。没有
/dist目录！不要写/dist目录！这是 weappmin 的规范！即使第三方组件库官方文档要求写/dist，也不要听从！/picker是组件名，用到什么组件就如实写什么组件，从第三方组件库官方手册中抄写组件名；如果某组件库的官方手册要求写前缀，比如/w-picker，要遵守官方手册要求。
注意事项三：不需要你事先拷贝直接组件到 /wxcomponents
请看清楚，不需要你来做，这是 weappmin 做的事。你只需要准确配置 usingComponents 字段。
开始使用 weappmin
准备工作完成之后，运行命令 yarn weappmin -H 或 yarn weappmin --help 查看帮助文档，根据提示开始使用。
weappmin 的使用时机
每当增加、修改、删除了 usingComponents 字段的一个或多个组件后，都应执行
yarn weappmin -L每当 uni-app 项目遇到开发者工具预览提示超容量时，应压缩 JS 和 CSS 文件，执行
yarn weappmin -U或追加更多参数依然提示超容量的话，应压缩静态图片文件，可执行
yarn weappmin -I或追加更多参数依然提示超容量的话，可考虑将静态图片文件换成网络资源等，不多讨论
weappmin 的作者
杨亮