xml地图|网站地图|网站标签 [设为首页] [加入收藏]
手机活动页图片性能优化分享,React转小程序现状
分类:web前端

在Prepros中使用PostCSS

Prepros中可能没有像CodePen中那么多插件可使用,但它包括了Autoprefixercssnext插件,可以在Prepros面板中选中,从而激活对应的PostCSS插件。你可以点击这里下载Prepros。

打开Prepros面板,可以将项目拖到面板中,而且这个面板包括一个CSS文件。然后点击CSS文件,将会在右边打开一个设置面板。在这个面板中你可以看到Prepros支持的PostCSS插件,你可以选择你想用的PostCSS插件。比如说你选择Autoprefixercssnext表示你使用了PostCSS这两个插件。

图片 1

如上图所示,你现在可以使用cssnext插件的所有功能以及Autoprefixed插件功能。

使用

从“RubyLouvre/anu下” git clone下来, 命令行定义到packages/cli目录下,执行npm link
使用mpreact <project-name> 创建工程
定位到 <project-name> 目录下 mpreact start 开始监听文件变化,
用微信开发工具打开当中的dist目录,自己收在src目录中进行开发.

小程序在它的体积还是1mb时,开发体验是很好的,性能也很好。但随着体积的限制放开了,产品经理开始乱搞,小程序原生的API与组件机制就跟不上了。不可能一个APP上有10个弹层,每一个都写一次吧。缺乏继承是它的硬伤。事件机制与我们熟悉的机制差太远。createSelectQuery也设计得非常弱智,wxs过于奇怪。因此有了webview标签后,许多人直接引入页面了。。。因此才有这么转译框架的诞生,包括TX内部的weby。

目前市面上许多转译框架是vue风格的,这对React技术栈的同学不公平,于是有了taro与anu的转译器。anu保留了虚拟DOM的模板,因此会比taro,mpvue更能突破小程序的桎棝。

1 赞 收藏 评论

图片 2

2 使用CDN

这个老生常谈了,但是真的必须有,每个请求都尽可能访问离自己最近的服务器上,那么响应时间肯定是最短的

减少请求数

总结一下

好吧,快速将上面的内容做个总结:

  • 试着在CodePen或Prepros中使用PostCSS
  • CodePen中提供了PostCSS十个插件
  • 在CodePen中的CSS面板中激活PostCSS插件,然后通过引入@规则,就可以使用特定的PostCSS插件
  • Prepros提供了Autoprefixer和cssnext插件
  • 在Prepros中点击项目中任何CSS文件可以设置PostCSS给Prepros提供的PostCSS插件

React转小程序现状

2018/09/05 · JavaScript · React, 小程序

原文出处: 司徒正美   

现在做React转小程序,一个是taro,一个是anujs。

anujs的React小程序一开始是群的方正搞的,后来神烦IT狗接手。当我们想抄袭时,已经有一个可以运行的demo。taro那时名声很大,但实质并不如意。我研究了好久taro的源码,发现可以使用tempate元素避开小程序的自定义组件不能在构造器传参的问题,就正式动工了。

小程序的自定义组件不能在构造器传参的问题, 用过React的同学都知道,React的组件构造器有两个传参props与context,这都是react帮你传入的。props是JSX中同名的标签的属性组成的对象,context是上方组件的getChildContext()产生的对象的并集。而小程序的Component只是一个方法,你传什么它就有什么,不会帮你加东西。

开发了大概有三个星期,已经脱离方正大大的源码。组件的思路使用双模板机制——即用户编写时是React风格编写的(es6与jsx),通过我们一番神操作,它会产生三个文件,第一个是js文件,es5与createElement风格,类机制改由ReactWX的miniCreateClass方法实现,第二个是json配置对象,涉及路由的title与窗口颜色的定义,第三个是wxml文件,我们将render方法的jsx抽取出来,变成这个文件。

现在我们的React小程序有如下优势

  1. 支持npm安装
  2. 支持less与sass
  3. 支持小程序的自带UI库
  4. 支持在JSX直接使用p, div, i, b等HTML标签,它们会在wxml转换成view与text标签。
  5. 支持在JSX中使用函数体与复杂的对象传参,即onClick={function(){ console.log() }}onClick={this.changeAge.bind(this, index, {aaa:111,bbb: 222})}
  6. 支持React完整的生命周期,并保证顺序。
  7. 对wx所有接口进行重新包新,将回调风格转换成Promise风格

图片 3

anu的React转小程序的性能是有保证的,它不会mpvue或taro那样使用nextTick,而是在一个页面的虚拟DOM更新完才发一次setData。这样就避免了复杂data diff与data 序列化。

小程序的setData性能很差,不能传入过大的对象,它会对data进行序列化。 因此一些转译框架会进行diff操作。但只要减缓它setData的频率,这一步就可以略去。

图片 4

事件系统上,支持onXXX与catchXXX。catchXXX是模拟阻止事件冒泡实现的API。微信小程序的同学说,用户事件是异步的,所以这里只有定义式接口,没有过程式的

图片 5

图片 6

与React的差异

1. 微信小程序的事件机制有瑕疵,不支持stopPropagation与preventDefault。我们将e.detail当成事件对象,在它基础上添加type,target,touches,timeStamp等属性与空的stopPropagation与preventDefault方法
2. 事件的绑定,不要使用this.props.fn或this.state.fn,要用this.fn这种形式,微信在给模板填数据时,会对数据进行JSON.stringify,清掉所有事件。
3. 组件系统是基于小程序的template元素,由于不支持slot,因此无法使用{this.props.children}实现显式的组件套嵌

  1. 不完整支持ref机制(refs可以放入组件实例,但不能放DOM,因为没有DOM)
  2. 无状态组件还没有实现
    6 还没有支持findDOMNode
  3. 不支持render props
  4. 不支持dangerouslySetInnerHTML属性

关于组件标签套组件标签,需要官方的slot机制支持,目前得到的回复是这样的:

图片 7

缩短请求响应时间

下一节:集成任务

CodePen和Prepros可以通过设置启用PostCSS插件。然而不利的一面是,你无法决定使用哪个插件。

当你准备使用PostCSS更多你想要的插件时,可以通过配置自己选择的插件。最容易的方法是通过gulp或grunt设置需要的PostCSS插件任务,并且让其跑起来。

在下一节中,你将可学习到如何在Glup或Grunt中配置PostCSS插件任何,并且让其跑起来为你所用。感兴趣的同学,欢迎持续关注接下来的内容。(^_^)。

1 赞 1 收藏 评论

图片 8

1 必须缓存

这个没有太多可说的。缓存了下次就不会请求了,检查图片响应头设置,图片缓存时间必须非常非常非常长

CodePen用法的例子

让多们看看如何在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板顶部,添加你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了这条代码,你将可以使用cssnext官网上描述的所有功能特性。比如,我们使用CSS的变量和函数给body设置一个background颜色。

首先,使用:root定义CSS变量。在CSS面板中添加像下面这样的代码:

:root { --body_bg_color: black; }

1
2
3
:root {
  --body_bg_color: black;
}

可以像下面的代码那样调用CSS的变量:

body { background: var(--body_bg_color); }

1
2
3
body {
  background: var(--body_bg_color);
}

这个时候你应该看到了预览面板上的背景颜色变成了black。你也可以点击CSS面板右上角的”View Compiled“按钮看到生成的代码:

图片 9

接下来,假设我们想让背景颜色不要是全黑色,想变亮一点。我们可以使用未来的语法修改颜色。

在上面声明的CSS变量中,修改--body_bg_color变量值,从black变成:

--body_bg_color: color(black lightness(20%));

1
--body_bg_color: color(black lightness(20%));

这是一个lightness()函数,在black颜色上调20%的亮度,这个时候你可以看到背景颜色从黑色变成了深灰色。

图片 10

可以在CodePen以这种方式使用任何支持的PostCSS插件:

  • 通过@规则引入你想要的使用的PostCSS插件
  • 根据插件的指令在CSS面板中使用(在上面你能找到对应插件使用说明的链接地址)

下面就是我们前面在CodePen中使用PostCSS得到的最终效果:

链接地址

DNS解析 –> 请求等待 –> 发送http请求 –> 服务器响应 –> 接收数据

CodePen中设置PostCSS

如果你是第一次接触PostCSS,那么通过CodePen来使用它是最快方式。

CodePen已预先集成了PostCSS,并且还支持下面所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

这些插件可以让你支持未来的CSS语法、像Sass一样的函数、注释的删除和代码的缩写等等。

首先在CodePen在线编辑器上点击”NewPen“创建一个新的页面。然后单击CSS窗口左上角的小齿轮图标,在弹出的面板中设置。

图片 11

单击“CSS Preprocessor”下拉选项,你可以选择下拉选项中的“PostCSS”选项。你也可以在”Vendor Prefixing“中选择“Autoprefixer”插件。

图片 12

然后你可以点击“Need an add-on”按钮,在弹出的面板中选择你需要的插件。在弹出的面板将会显示@规则插件,复制粘贴这些@规则对应的PostCSS插件到你的CSS面板中,并且开始使用。

图片 13

1 域名收敛

我们明白,页面资源请求过程是这样的:

PostCSS深入学习:设置选项

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中,可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。

在这篇文章中,我们将先告诉你如何设置PostCSS选项,所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。

马上让我们看看如何开始玩PostCSS。

3 图片懒加载

把有限的资源请求数用在用户能感知到的区域内。我们目前的策略是,默认只加载当前可展示区域,以及预加载可视区域下方半个或者一个屏幕(依据网络情况而定)内的图片。有个值得注意的点就是,针对以非常快的速度划过的区域,这块区域不视为可视区域。而只把用户真正在停留或者以相对较慢的翻屏速度查看的区域,才视为需要图片加载的区域。以避免不要的网络资源消耗。

1 图片使用限制

由于移动端网络情况相对较差,在图片使用上,我们限制了单张图片的大小。如果用户上传了大于限制kb的图片,我们会提供一个傻瓜式的在线图片编辑器,提供给用户进行一键切图、裁剪、压缩等功能。从而保证原图不是一张巨大图

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:手机活动页图片性能优化分享,React转小程序现状

上一篇:从条纹边框的实现谈盒子模型,网页字体设置你 下一篇:没有了
猜你喜欢
热门排行
精彩图文