详解基于Wepy开发小程序插件(推荐)
开发
wepy-plugin-autopages
使用wepy开发项目时不需要手动配置app.wpy下的config.pages，autopages插件会自动监控pages目录下文件的变化，自动生成更新对应app.json下的pages。
注意：该插件只会对编译文件dist里配置添加，源文件是不会改动的。
注意：我还发现有个问题是他是按命名顺序添加的，所以开发阶段可以用客户端指定路径，但是发布的话还是乖乖手动添加吧
这插件看情况使用吧，如果是个人项目的话我觉得还是值得用的，毕竟每次新增页面都要手动添加很繁琐，但是如果是合作项目开发到某个阶段的时候还是手动填上去吧，因为便于其他人可以知道你项目的所有跳转路径有哪些。
plugins:[
autopages:{}
]
wepy-plugin-px2units
将px单位转换为rpx单位，或者其他单位的PostCSS插件。
plugins:{
px2units:{
filter:/.wxss$/
}
},
注意：根据实验所得只对wxss文件起作用，在wxml的行内样式不改变。
//输入
.userinfo-nickname{
width:200px;
height:200px;/*no*/
margin:200rpx;
}
//输出
.userinfo-nickname{
width:200rpx;
height:200px;
margin:200rpx;
}
略微有点鸡肋，虽然会节省一点微不足道的代码量，但是它本身还是有些可能需要用到的配置项的。
| 配置项 | 作用 |
|---|---|
| divisor(Number):除数 | 转换后的值等于pixel/divisor |
| multiple(Number):倍数 | 转换后的值等于pixel*multiple |
| decimalPlaces(Number) | 小数点后保留的位数 |
| comment(String) | 不转换px单位的注释，默认为/no/ |
| targetUnits(String) | 转换单位，默认值为rpx |
wepy-plugin-replace
文本替换,为plugins添加replace对象，支持单个或者多个规则，多个规则可以以Array或者Object实现，filter的对象为生成后文件的路径，例如'dist/app.js'，每个规则也同时支持多个替换条目，同样是以Array或者Object实现。
module.exports.plugins={
'replace':{
filter:/moment\.js$/,
config:{
find:/([\w\[\]a-d\.]+)\s*instanceofFunction/g,
replace:function(matchs,word){
return'typeof'+word+"==='function'";
}
}
}
};
用法很简单，指定后缀文件匹配规则替换函数。
生产
就以我的一个项目为例，在不用插件的情况下打包体积是6.04M。
然后看看怎么一步步将其体积减少。
wepy-plugin-uglifyjs
JS压缩插件
module.exports.plugins={
'uglifyjs':{
filter:/\.js$/,
config:{
}
},
};
因为小程序基本JS代码为主，所以这个效果非常可观，文档只写了这个用法，还有很多自定义选项需要自己去研究，文档给出的参数说明链接是UglifyJS2，即使如此，单单JS一项都好厉害。
| 使用前 | 使用后 | 压缩率 |
|---|---|---|
| 6.04M | 2.76M | 45.69% |
wepy-plugin-filemin
文件压缩插件支持css，xml，json
module.exports.plugins={
'filemin':{
filter:/\.(json|wxml|xml)$/
}
};
| 使用前 | 使用后 | 压缩率 |
|---|---|---|
| 2.76M | 2.72M | 98.55% |
唔。。。
有点尴尬，那点体积真的微不足道，一来样式本来就不多，二来css本身压缩空间有限，不可能把样式属性简化吧，聊胜于无。
wepy-plugin-imagemin
图片压缩插件
module.exports.plugins={
'imagemin':{
filter:/\.(jpg|png|jpeg)$/,
config:{
'jpg':{
quality:80
},
'png':{
quality:80
}
}
}
};
参数说明请看imagemin
| 使用前 | 使用后 | 压缩率 |
|---|---|---|
| 2.72M | 2.24M | 82.35% |
不得不说还是可以的，基本用法大家用过打包器都不陌生就不说了,直到某一天腾讯出了一款重量大杀器，请看看下面——
WeCOS
腾讯推出的小程序瘦身工具，通过WeCOS，小程序项目中的图片资源会自动上传到COS上，且WeCOS自动替换代码中图片资源地址的引用为线上地址，移除项目目录中的图片资源，从而减小代码包大小，解决包大小超过限制的问题。
前期准备工作：
- 进入腾讯云官网，注册腾讯云账户，指引参考注册腾讯云。
- 登录对象存储控制台，开通对象存储服务，创建存储桶，指引参考创建存储桶
- 通过GitHub地址下载WeCOS工具。
- 在Node.js官网下载环境并安装。
我就默认你们都搞好了前期，然后我们先安装插件
npminstallwecos-g
在与开发目录app同目录下创建一个wecos.config.json配置文件，在配置里填写基本的配置信息。
- appDir指定了小程序开发目录。
- appid为腾讯云账号的appid。
- bucketname是为存储图片创建的bucket的名称，这里是名为weixintest的bucket。
- folder可以指定到bucket下的某个目录，本文指定到/wxtest目录下。
- region是指定上传到COS的指定地区，这里指定为tj，即天津。目前COS支持天津、上海、广州。
- secret_key、secret_id是账户密钥，用户可以自行到腾讯云COS控制台上获取。
之后直接运行命令
wecos
命令行显示项目中的图片上传成功。翻看项目目录，发现图片已经被删除，代码中的图片引用也被换成了线上的地址，项目包一下子小了。同时，WeCOS很贴心的在开发项目外生成了个wecos_backup目录，来保存原来的图片作为备份。除此之外，WeCOS默认启用监听模式，这是为了让开发过程中无感知，当我们不再进行项目开发，停止运行WeCOS即可。
和wepy-plugin-imagemin相比。
| 使用前 | 使用后 | 压缩率 |
|---|---|---|
| 2.72M | 1.46M | 53.67% |
前者操作简单无额外依赖，后者效率惊人，具体取舍看项目需要吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。