vue 项目在低配机器上线及优化

2019-07-25 17:58:45

背景 功能:最近帮朋友的忙,抽空用vue-cli3脚手架,开发一个网站,适配pc和mobile,两端分别有约10个页面,也就是十个路由,网站中的图片比较多,且使用了几个自定义字体,ttf文件都在2m左右。 服务器环境:本着能抠一点就抠一点的原则,购买的是阿里云ECS的入门配置,1核1G,40G硬盘,1M带宽,基本上是最低配了。(本来想用搬瓦工来着,但最近搬瓦工被封的厉害,风险比较大,可能买来用一两周就GG了。) 由于是空闲时间搞得,时间也比较急,前期没进过任何优化,直接编译完上线,发现首次全部加载完成耗时32s !分析发现原因如下: 每页加载的图片都在10~25张左右,所有的图片全部没有压缩,尺寸较大,尤其顶部banner达1~2M左右,其余大图在700~800kb之间,每页的图片加起来在5M~10M之间。 引入的自定义平方字体,使用了regular,medium,thin等几种,每种ttf字体都在2M左右,加起来字体有7、8M。 首屏加载所有路由,加载耗时。 由于服务器是1M带宽,那么每秒下行的最高速度约在120k左右,加载以上超过10M的资源,

Flutter 实战进阶

2019-03-19 16:02:25

Flutter 在实际开发中遇到的一些问题及解决方案,作为笔记记录。 1、container width、height 100% FractionallySizedBox( widthFactor: 1, heightFactor: 1, child: , ) double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 2、沉浸式背景图片 背景图片铺满Appbar及状态栏 Widget build(BuildContext context) { return new Stack( children: <Widget>[ Container( child: Image.network('https://www.bing.com/

何人在此

2019-02-16 21:38:48

发现现在有些年轻人,看书,看剧,看很多东西,听很多东西。日常表述观点惯用:某某说过,我特别赞同/喜欢某某在哪哪说的什么。遇到事自己没主意时,不先思考下,首先想到的就是去问周边同龄的朋友,或者去网上搜索,然后筛选些自己看着舒服的答案直接拿过来用。这些好像没什么不对。然而自始至终都没有太多的自我思考,大多是嗟来之食。人生来就是一张白纸。就中青少而言白纸又分为多种。一种,就是开头说的这种。在感觉到自己的空白后,在慌张下开始”学习“,这确实是好事,然而吃相太不讲究,遇到的各种观点,只要看着舒服的,拿来就吃,饥不择食,快速的填充自己的世界观。找到自己觉得不错的观点就狼吞虎咽,收藏起来。到头来,说起什么话题,遇到什么问题,确能迅速从藏品中拿出来一个观点回应,来作为行为的指引,实则是别人的观点。而这些观点一般都是供大众消费用的,类鸡汤文。看似很有见地,但却是真真儿的是受人操控,活在大流中的傀儡。这种人我称之为会吸星大法的,大家都知道,在所有武侠小说中,吸星大法都是极为厉害的武功,能让人快速“变强”

Flutter组件合集

2019-02-12 17:00:05

Element Form 1、Input TextField 最常用的文本输入组件。 用户修改文本时,可通过Onchange获取最新的文本信息。 onSubmitted可获取到软键盘的确认按钮。 默认下方有一个横线,decoration属性可以设置图标、padding等更多属性 2、Checkbox CheckboxListTile 下拉复选框,带有复选框的ListTile,带有标签的ListTile 整个列表的图块是交互的,点击图块中的任意位置可切换复选框。 Checkbox 3、Button FlatButton 默认无边框,无背景色的按钮 FlatButton.icon 为带图标的 RaiseButton 凸起的按钮——带有shadow阴影的质感按钮 RaiseButton.icon 为带图标的 IconButton 纯图标按钮,无边框无背景色 PopupMenuButton 弹出菜单栏的图标。 PopupMenuButton 和 popupMenuItem 配合使用。 选择菜单项时,触发onSelected方法。 FloatingActionButton 默认的圆形悬浮按钮,每个页面最多一个。Scaffold.

Mweb使用腾讯COS作为图床

2019-01-25 22:48:36

新入一盆小老弟同款熊爪,取名金风。 回归主题。接上上上上篇,使用腾讯COS替代七牛作为图床之后。平时使用Mweb作为Markdown写作软件,用着蛮舒服的。但是Mweb集成的图床是七牛的图床,腾讯COS的没有集成。每次发布文章前要把文章中的图片手动上传,然后复制链接。😂 当文章中的图片比较多的时候,我发现太扯淡了...所以想着整个上传的API。结果找了一圈没发现现成的轮子,只能自己造一个了。 思路比较简单,就是利用Mweb可配置自定义的图片上传功能。写一个腾讯COS上传图片的接口,然后配置到Mweb中即可。同时可配置CDN加速、图片处理规则。 github: https://github.com/flute/Mweb_tencet_cos 代码如下: /** * MWeb使用腾讯云存储COS作为图床 * 利用COS API,用nodejs作为server上传图片,添加至MWeb的配置中即可 * 2019-01-25 23:00 * author: ludis * github: https://github.com/flute/Mweb_tencet_cos * COS