深入浅出-Webpack学习笔记(四)——优化·上

了解了webpack的一些基本使用方法,我们就开始需要着手于一些优化点了。 webpack优化可以分为优化开发体验和优化输出质量两部分,那么接下来就深入学习一下webpack的优化。

优化开发体验
优化开发体验的目的是为了提升开发时的效率,其中又可以分为以下几点:

  1. 优化构建速度。在项目庞大时构建耗时可能会变的很长,每次等待构建的耗时加起来也会是个大数目。
  2. 优化使用体验。通过自动化手段完成一些重复的工作,让我们专注于解决问题本身。

优化输出质量
优化输出质量的目的是为了给用户呈现体验更好的网页,例如减少首屏加载时间、提升性能流畅度等。 这至关重要,因为在互联网行业竞争日益激烈的今天,这可能关系到你的产品的生死。

优化输出质量本质是优化构建输出的要发布到线上的代码,分为以下几点:

  1. 减少用户能感知到的加载时间,也就是首屏加载时间。
  2. 提升流畅度,也就是提升代码性能。

优化的关键是找出问题所在,这样才能一针见血, 输出分析 教你如何利用工具快速找出问题所在。

阅读更多...

深入浅出-Webpack学习笔记(三)

接下来学习如何用 Webpack 去解决实际项目中常见的场景

使用ES6

虽然目前部分浏览器和 Node.js 已经支持 ES6,但由于它们对 ES6 所有的标准支持不全,这导致在开发中不敢全面地使用 ES6。

通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码,这包含2件事:

  • 把新的 ES6 语法用 ES5 实现,例如 ES6 的 class 语法用 ES5 的 prototype 实现。
  • 给新的 API 注入 polyfill ,例如项目使用 fetch API 时,只有注入对应的 polyfill 后,才能在低版本浏览器中正常运行。
阅读更多...

从Service-Workers认识离线应用

认识离线应用

你的网页性能优化的再好,如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术,让资源在第一次被加载后缓存在本地,下次访问它时就直接返回本地的文件,就算没有网络连接。

离线应用有以下优点:

  • 在没有网络的情况下也能打开网页。
  • 由于部分被缓存的资源直接从本地加载,对用户来说可以加速网页加载速度,对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术,历史上曾先后出现2种离线离线缓存技术,它们分别是:

  • AppCache 又叫 Application Cache,目前已经从 Web 标准中删除,请尽量不要使用它。
  • Service Workers 是目前最新的离线缓存技术,是 Web Worker 的一部分。 它通过拦截网络请求实现离线缓存,比 AppCache 更加灵活。它也是构建 PWA 应用的关键技术之一。

Service Workers 相比于 AppCache 来说更加灵活,因为它可以通过 JavaScript 代码去控制缓存的逻辑。

阅读更多...

深入浅出-Webpack学习笔记(二)

配置 Webpack 的方式有两种:

  • 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置;
  • 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack –devtool source-map。

这两种方式可以相互搭配,例如执行 Webpack 时通过命令 webpack –config webpack-dev.config.js 指定配置文件,再去 webpack-dev.config.js 文件里描述部分配置。

按照配置方式来划分,可分为:

  • 只能通过命令行参数传入的选项,这种最为少见;
  • 只能通过配置文件配置的选项;
  • 通过两种方式都可以配置的选项。 阅读更多...

深入浅出-Webpack学习笔记(一)

webpack的思想

Webpack 是一个打包模块化 JavaScript 的工具,在 Webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

其官网的首页图很形象的画出了 Webpack 是什么


一切文件:JavaScript、CSS、SCSS、图片、模板,在 Webpack 眼中都是一个个模块,这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理,最终会输出浏览器能使用的静态资源。

Webpack的优点是:

  • 专注于处理模块化的项目,能做到开箱即用一步到位;
  • 通过 Plugin 扩展,完整好用又不失灵活;
  • 使用场景不仅限于 Web 开发;
  • 社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
    良好的开发体验。
阅读更多...

小话前端动画

前言

在如今的web时代,网页中的动画已经成为web交互中必不可少的要素,小到一个按钮的点击,大到一个炫酷的特效,各路神圣大显神通,展示了web动画的无限可能,进而动画也就成了前端开发者不得不认真了解的一个领域。

就目前来看,前端实现动画就有六种方式:

  • css的transition
  • css的animation
  • javascript利用setTimeout手写
  • requestAnimationFrames
  • SVG
  • Canvas

以上六种中,SVG由于CSS3的出现使用得越来越少了,而Canvas又是一个很庞大的领域,作为h5如今力压flash的王牌,canvas需要一定的额外学习成本。因此这篇文章将暂时不探讨这两种方式。

而剩下的四种方式,习惯上我们更容易想到,用transition和animation做比较,用setTimeout和requestAnimationFrames做比较,因此我们也已这样的角度,分别探究一下这四种方式的各个方面

阅读更多...

Vue通过JS动态设置-keyFrame实现列表项不同动画

预期效果


对于这个效果,可以选择height配合transition实现,但是css3提供了更流畅的animation,我们就用它来实现这个需求吧

可以看到每一项animation的keyframe都不一样,也就是每一项需要动态使用不同的关键帧。所以主要使用的方法就是动态地往document里插入具有不同关键帧的styleElement,然后在触发动画的地方将animation属性赋给对应的元素。

阅读更多...

由链式调用再探函数柯里化

前言

函数柯里化并不是JS的一个特性,而是一种处理函数的模式,我第一次接触这个概念还是在准备面试复习JS的时候,然而由于之前对函数柯里化不熟悉,复习也就没有完全理解,导致面试时候关于函数柯里化的题只要稍微有变动,就能卡得我一脸懵逼。“一知半解”可是面试中的大忌,于是我打算——再探函数柯里化。

阅读更多...

IntersectionObserver与图片懒加载

文章参考:IntersectionObserver 和图片懒加载

关于 IntersectionObserver

IntersectionObserver 这个 API 平常可能听得比较少,caniuse 兼容性报告目前支持率是 90.12%,还不推荐用于大众化的场景中,但是它的能力和性能非常的好。

IntersectionObserver 接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做”交叉观察器“。

阅读更多...
  • Copyrights © 2015-2020 AURORA_ZXH
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信