详解基于Wepy开发小程序插件(推荐)


Posted in Javascript onAugust 01, 2019

开发

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*instanceof Function/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 官网下载环境并安装。

我就默认你们都搞好了前期,然后我们先安装插件

npm install wecos -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%

前者操作简单无额外依赖,后者效率惊人,具体取舍看项目需要吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
js函数和this用法实例分析
Mar 13 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 #Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 #Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 #Javascript
微信小程序组件传值图示过程详解
Jul 31 #Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
You might like
php str_pad 函数用法简介
2009/07/11 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php Smarty 字符比较代码
2011/02/27 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
Smarty模板配置实例简析
2019/07/20 PHP
对于this和$(this)的个人理解
2013/09/08 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
日语专业推荐信
2013/11/12 职场文书
机关搬迁方案
2014/05/18 职场文书
物业管理专业求职信
2014/06/11 职场文书
中国梦口号
2014/06/13 职场文书
会议欢迎标语
2014/06/30 职场文书
党员检讨书范文
2014/12/27 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
暖春观后感
2015/06/08 职场文书
技术入股合作协议书
2016/03/21 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL