更新webpack4记录

webpack4发布到现在3个多月的时间,webpack的配置正在向parcelljs靠齐,尽量让用户少配置,不要把时间浪费到配置工具上来。废话不多说,我们一步步来使用webpack4来构建vue2.x 应用。

目标

利用webpack4 打包 vue+ vue-router 应用

1.实现缓存常驻(基本库能够在每次打包没有变化)。

2. 基于路由进行代码分割,实行代码基于路由懒加载

3. 在每次提交代码的时候 利用eslint进行代码的检查,

4. 在编写过程中,能够实现热更新,能够自动打开浏览器。

5.在开发过程中,利用开发服务对api请求使用代理,解决跨域问题

6. 利用jest + vue-test-utils测试框架进行测试

7. 部分UI单元测试采用puppteer测试,如用户的登录注册,各个端的模拟

8. 将每个文件分割成小于200kB的文件(在HTTP2协议中,多个小文件比大文件传输速度快,而且只有一个tcp连接)

本次开发,vue-template 我们使用 pug 模板,css的编写使用stylus预处理语言。现在让我们Let’s rock it.项目地址是https://gitee.com/lmz2423/vue-webpack4/

阅读 “更新webpack4记录”

vipkid学习中心页面优化记录

学习中心首页

来vipkid半年多,一直参与学习中心项目的开发,学习中心是一个复杂的项目,项目包含积分商城,激励活动,学生图书馆,学生预习视频,而每个小项目包含带的内容又挺多,采取开发框架是vue2.x框架。随着项目的进行,项目的优化也在进行之中。

对于前端应用来说,最重要的就是网络延时,页面的显示时间越快。我们从协议层,页面加载资源,域名预解析,代码分割层面对前端应用进行了优化,至于图片压缩,代码压缩这些基本手段,不在本文考虑的范围之内.

阅读 “vipkid学习中心页面优化记录”

闭包

上图代码是go语言闭包的写法,当一种编程语言引入了闭包的思想,那么我们就知道

  • 该编程语言函数肯定是一等公民(就是函数可以作为参数,可以作为返回值)
  • 函数内部可以定义函数 

什么是闭包

我们从上面得知,闭包肯定与函数有关,一种说法是,闭包是引用了自由变量的函数,这个自由变量将和该函数一同存在,即使离开创建它的环境也还存在。这种说法是指明闭包是一个函数。还有一种说法:闭包是由函数和与其相关的引用环境组合而成的实体  。这两种各有各的说法 。但是闭包保证能够在函数内部调用自由变量,而函数外部无法访问到该自由变量。

阅读 “闭包”

HTTP2协议之TCP协议1 -学习笔记二

上一篇文章说起http1.1协议并没有效利用tcp协议,而且tcp协议的连接耗时,接下来,我们来瞧一瞧tcp协议。上图是建立tcp协议的过程以及传输文件的过程。这篇文章带领大家使用抓包工具来分析tcp协议

下载抓包分析工具wireshark

wireshark是一款强大的抓包分析工具,下载地址自行google,度娘。使用教程自行google,度娘。启动wireshark 如下所示

阅读 “HTTP2协议之TCP协议1 -学习笔记二”

HTTP2 协议学习笔记一

http/1.1 vs http/2

1999年6月份发布的http1.1协议,RFC2616 到现在有19年了,http1.1协议为web繁荣做出了巨大的贡献,但是随着web所承载的资源越来越多,http协议需要更新,以适应新时代的发展。2009年,Google工程师提出了HTTP协议的替代方案,SPDY .SPDY为HTTP2奠定了基础。SPDY协议包含了多路复用,帧和首部压缩的特性,这些特性也被在HTTP2协议中了 2015年5月14日HTTP/2协议发布。

怎么测试网站已使用http协议

我们可以下载Chrome浏览器插件HTTP/2 and SPDY indicator ,我们在浏览器地址栏中输入https://hpbn.co/primer-on-web-performance/#latency-as-a-performance-bottleneck  ,如下视频所示:

http2要解决的问题

http2要解决的问题就是减少延迟,在web服务中,延迟是web服务最重要的性能指标,也是web服务的性能瓶颈。  我们知道在OSI模型定义了七层结构。每层结构如下图所示:

阅读 “HTTP2 协议学习笔记一”

GC中的基础概念

在前一篇文章中,我们只是瞎扯一下垃圾回收。对垃圾回收的中的三大算法,标记-清除,引用计数,GC复制算法,并没有进行详细地描述。在论述这三大算法之前,我们先扯一扯GC中的基本概念,搞清楚基本概念,对理解垃圾回收算法就会容易一些。当然GC本来就是一个比较复杂的东西。

我们先看下面的一张图

在GC中,对应上图的,分别是 Heap(堆),Object(对象)Mutator(突变体),Stack(栈),Pointer(指针),Root(根)

阅读 “GC中的基础概念”

v8 javascript引擎 垃圾回收(1)

我们系统的内存是有限的,假如我们的服务器运行的服务存在内存泄漏时,如果用户基数大,垃圾会充斥着内存,导致我们的服务运行变慢,甚至系统宕机。说道内存泄漏,我们需要了解内存中堆与栈的概念。(垃圾回收相当复杂,本文是触及到一点点点点点皮毛,估计90%的是错误的)  阅读 “v8 javascript引擎 垃圾回收(1)”

Nodejs中block和non-blocking的概述(译+补充)

非堵塞IO说明图

本篇文章将介绍在Node.js中BlockingNon-Blocking调用的不同点。文中特指event looplibuv. 并不去阐述BlockingNon-Blocking的基础知识。读者需要对javascript 语言和Node.js的回调模式有个基础的了解。

“IO” 指的是通过libv实现与系统硬盘和网络的交互。

libv是个专为Nodejs编写的一个跨平台的基础库。它围绕事件驱动异步IO模型来设计的。下图libv库展示了各个子系统的构成。阅读 “Nodejs中block和non-blocking的概述(译+补充)”