Webpack打包实用优化方案

作者:汪楠 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率,成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了,关于 Webpack 的优化方案,网上有很多文章可以供大家参考。查阅前人的资料,总结自己在项目中遇到的问题,最终得出一些比较实用的优化方案,本文将与大家一一分享。既然是打包优化,那么我们需要时刻关注以下几点: 减少编译时间 减少编译输出文件大小 提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting (作用域提升)。曾经的 Webpack 是将每一个模块(每一个被 import 或者 require 的代码) bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里,每一个模块外层都会有一些特殊的闭包包装,导致文件增大,同时它也使得编译后的 js 文件在浏览器中的执行效率降低。 虽然,理论知识已经了解,但我们还是用实际操作来验证一下: 开启 ScopeHoisting 非常简单,因为 webpack 已经内置了这个功能,在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

执行编译后,结果如下: bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开,编译结果如下: 对比两个的区别大家可以发现,在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码: […]

【译】使用 Flutter 实现跨平台移动端开发

作者: Mike Bluestein   | 译:孙印凤 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/] 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,同时它也是 Google 即将推出的 Fuchsia 操作系统的开发平台。此外,通过自定义的 Flutter 引擎可以将其嵌入到其他平台。 Flutter 为什么会出现?为什么要使用它呢? 一直以来,跨平台工具采用以下两种方法之一: 在原生应用程序中嵌入 web view ,像构建网站一样构建应用程序。 封装原生平台里的控件并为它们提供一些跨平台的参数。 为了使移动端开发变得更好,Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建,提供了实际渲染时用到的 widgets,而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样,该方法可以灵活的以完全自定义的方式构建跨平台应用程序,同时还会提供流畅的性能体验。与此同时,Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。简言之,Flutter 目前是移动端开发者接触到的最接近跨平台开发的东西。 Dart Flutter 应用程序使用 Dart 编写,Dart 是最初由 Google 开发的一种编程语言。它是一种支持预编译和实时编译的面向对象语言,所以比较适合开发原生应用程序,配合 Flutter 的热加载可以提供高效的开发工作流程。Flutter 最近也转向使用 Dart 2.0 […]

【译】使用React和HTML5表单验证API处理表单元素

作者: Dmitry Sheiko | 译:甄玉磊 原文地址:[http://dsheiko.com/weblog/handling-forms-with-react-and-html5-form-validation-api] 【译者注:链接序号对应下面扩展阅读,另外可以点击阅读原文查看详细的链接文章】 简介:React 没有内置的表单验证逻辑,但是我们可以使用第三方解决方案。这种方法可能是开发包、表单生成器,还可能是 HOC 或者是包含校验逻辑的任意表单容器组件。那么选择哪种方法呢?我们将在本文中一 一介绍。 每当我们提及应用程序中的用户输入框时,首先映入脑海的就是 HTML 的表单元素。最早的 HTML 版本就已经支持 Web 表单。众所周知,这一特性于 1991 年提出,且在 1995 年作为 RFC(征求评议文件) 1866[1] 号协议标准化。与此同时表单元素也得到了广泛应用,几乎每一个代码库和框架中都在使用。那么在 React 中如何使用呢? Facebook 在如何处理表单上提供了受控的输入框[2]。该输入框指的是受控表单,主要是通过交互事件和通过 value 属性传递 state 值实现对输入框的控制。因此,你可以决定表单的校验和提交逻辑。拥有好的用户体验的 UI ,意味着你应该考虑到诸如“提交”、“校验”的逻辑以及内联的错误提示信息,根据有效性、原始状态和提交状态来切换元素。难道我们不能提取这种逻辑,简单的插入到表单元素中吗?当然可以,唯一要考虑的问题是我们要采用何种方法和解决方案。 组件库中的表单 如果你习惯使用诸如 ReactBootstrap[3] 或者 AntDesign[4] 等 React 组件库,很可能已经对其中的表单组件感到满意。这两个组件库所提供的表单组件满足了多种需求。例如在 AntDesign 组件库中我们定义了一个表单元素 Form 以及带有表单域的 FormItem ,即包裹了任意输入控制的容器。你可以在 FormItem 设置校验规则:

举例来说,在处理表单提交时,你可以执行 this.props.form.validateFields() […]

再谈Vue组件库开发

导读:本文是Vue2.0组件库开发系列文章第二篇。继第一篇《漫谈Vue组件库开发》后,再来聊一聊基于webpack脚手架开发一个Vue2.0移动端UI组件库的经验与思考。 前文再续,书接上回。话说 Vue 组件库开发那些事儿。 我们的 Vue 组件库开发经验主要来自于 NutUI 组件库的开发实践,这是我们从众多项目中提炼的一个基于 Vue 2.0 的移动端 UI 组件库,它给我们后续的项目开发工作带来了很大的便利。小伙伴们可以扫描以下二维码体验一下: NutUI 目前拥有近 50 个组件,还在持续扩充和打磨。除了对话框、日历、轮播、选项卡、轻提示、懒加载等通用组件外,还拥有不少电商特色的组件,比如商品价格、评分、商品数量选择、地区选择面板等等。如果你的项目里需要,也是可以使用的。具体的安装使用方法,可参考官网相关页面[1]。 广告播完了,欢迎回来。我们聊正事儿。 从 Vue 2.0 组件开发的基础聊起吧。 Vue组件开发核心方法 Vue 组件的本质是可复用的 Vue 实例,它们与 new Vue 接收相同的选项,比如 data、computed、watch、methods 以及生命周期钩子等等。 Vue 中与组件开发相关的方法主要有 Vue.component 和 Vue.extend,那么二者有什么作用和区别呢? 先说 Vue.extend 吧。Vue 2.0 文档对 Vue.extend 的描述一笔带过,可它却是 Vue 组件开发最为关键的方法。Vue.extend 的作用是使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。它返回的是一个“扩展实例构造器”,也就是预设了部分选项的 Vue 的实例构造器。通过对这个“扩展实例构造器”进行实例化,可以得到组件实例。

再说 Vue.component。 […]

WebGL入门与进阶3

前文已经大概讲解了一些基础知识,涵盖了WebGL创建,着色器,着色器编程以及缓存区等知识,一些简单的点面效果即可以基于此来完成,接下来让我们绘制一下如下的效果: 让我们先准备一下前期的WebGL内容,首先让我们来创建一个可以接受参数的着色器,(如果不清楚具体要怎么创建可以参考上一章教程内容) 接下来,我们需要创建多个点的坐标,所有点在同一行时,只有X坐标是变化的,y是相同的。 但因为WebGL的坐标系与实际页面中的坐标系是不同的,如下图,普通canvas坐标系与正常的浏览器像素值相同,但WebGL中的坐标系是以整个WebGL中心点为(0.0,0.0),而且坐标的精确度为小数点后一位。坐标系对比如下图所示: 然后你知道了这个依旧会绘制出超级模糊的图像,那是因为整个WebGL的尺寸是与canvas宽度与高度相关连的,并且canvas的宽度与高度如果用css来设置的话,会被默认成100×100,也就意味着,你绘制出来的图形是把100×100的图形拉伸到当前canvas的尺寸中。所以正确的设置canvas的方式应该如下:

首先我们需要先将对应的真实坐标转换成WebGL坐标,因为canvas宽度的一半对应为WebGL的1.0尺寸。所以将真实像素除以宽度的一半就可以得到对应的WebGL尺寸,高度与宽度的处理方式一致。

有了点,那么我们就可以使用先前讲过的缓存区开始批量绘制点了。(如果不清楚具体如何使用缓存区绘制,也可以点击上一章)。 接下来我们要让他动起来,怎么动起来呢?思路是我们可以在不停的重绘,并且将点进行轻微位移即可达到效果,定时执行函数可以使用setInterval或setTimeout。但此2个函数性能上有很大问题,并且也无法完美的匹配浏览器的刷新频率。 在这里我跟大家介绍一个新函数requestAnimationFrame。 requestAnimationFrame是为了提高js动画性能而诞生的神器。下面我们简单来介绍一下这个函数为何被誉为神器。 requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,也就是没s刷新60次。因与浏览器刷新频率一样所以不会出现看似卡顿的情况出现。 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量 requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销 具体的内容以后有机会可以单独详细来介绍此函数功能。 接下来让我们来绘制一个变化的函数,变化值从0开始,requestAnimationFrame内容入参为循环执行的函数名。

接下来我们需要将之前绘制点的部分功能函数提取到单独的一个函数中,方便动画循环调用时使用。

接下来也就是最重要的,我们需要每次都变更对应点的坐标位置,因我们要使用波浪效果,所以采用正弦函数来实现,首先让所有的点都按照每次变更10度的浮动,并且因为是上下移动,我们只需要变更y轴的坐标即可。

正弦函数Math.sin传入的值不是角度,而是弧度,我们需要通过下面的函数把角度转化为弧度,函数如下:(如果您不知道弧度与角度的关系,建议自行查询)

我们为此函数中x与y的值进行一下操作。 为保证所有的点肯定全部覆盖屏幕,我们将每个点的间距调整按照整个canvas宽度超过500的尺寸来平均分,整个坐标系向做便宜200,也就是右边还存在300的富于空间,这样即使有错开位移也不会让屏幕露出空白。接下来,为了让上面的点波动比下面的点大,让我们来设置了一个最大倍数,并且将行数与此倍数关联,这样就会使动画上下浮动不一样了。

我们达到了横向。 接下来我们在角度便宜中添加上x轴的影响力。

让我们看看效果,波动开始有偏差了。 效果按照我们预期的方向前进了,接下来我们扩大x轴的影响,这个个人可以一点一点尝试,我们直接扩大到5倍。

看样子动画效果已经基本达到了效果,接下来让我们把上面的点变小,下面的点变大。产生前后的视觉差。 如何让渲染的点尺寸不同呢?没错我们也可以使用缓存区来操作。 对创建点的函数进行改造:

我们把点与对应的坐标匹配一下,并且把点的数量动态化,让我们在使用缓存区来把size动态批量化。

记得着色器上要声明一个接收的参数哦。

然后我们在render函数中可以直接使用其函数进行重绘。 我们已经绘制出来了最终效果,本着开源的原则,完整代码链接如下: https://github.com/jdf2e/webgl-demo 有兴趣欢迎关注我们的公众号:全栈探索。欢迎交流。

© 2018 JDC. All Rights Reserved.