分类： Server

本文的目的就是让读者对webpack快速的有一个整体的认识，了解其主要的功能。如果对其中某一项感兴趣，详细的使用方式建议查阅webpack官网文档。

首先了解一下gulp与webpack的区别

gulp：强调流程，通过配置一系列的task，定义task处理的事物（例如文件压缩合并、雪碧图、启动server、 版本控制等），然后定义执行顺序，来让gulp执行task，从而构建前端项目的流程。

webpack：是一个前端模块化方案，侧重模块打包，把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

相同：

可以文件合并与压缩（css）

不同点：

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

webpack五个核心概念

1. Entry – 如何，以哪个文件为起点开始打包，分析构建内部依赖图。
2. Output – 把bundles输出到哪里，以及如何命名。
3. Loader – webpack默认只能处理JS，如果需要处理其他必须html/css/img等资源就需要加载对应的Loader。相当于翻译官
4. Plugins – 做一些功能更复杂的操作，比如压缩代码，定义环境变量，优化插件，语法检查，dll等
5. Mode – development 本地调试，简单配置，能运行即可。production – 配置各种优化项，保证上线之后的性能

devServer

自动编译，自动打开浏览器，自动刷新

性能优化

开发环境

优化打包构建速度 – HMR
优化代码调式 – sourceMap(压缩后的js文件可以映射到源文件，快速找到代码行)

生成环境

打包速度
代码运行的性能 – oneOf、缓存、tree shanking、代码分割、懒加载、PWA、多进程打包、external、dll。

HMR（hot module replacement） – 热模块替换

监听细微变化进行局部更新
devServer:{
hot:ture
}

oneOf

rules配置项下面把所有的loader都放到oneOf数组里面，性能更好

缓存

只编译代码改变了的模块，其他模块开启babel缓存
rules下的babel-loader配置cacheDirectory:true
文件资源缓存，根据chunk生成hash值
content hash:根据文件的内容生成hash值

tree shaking

去除那些没有使用的代码
前提：

• 必须es6的模块化方案
• 开启production环境
  package.json中配置
  sideEffects:[“*.css”] // 保证css不会被摇掉

code split – 代码分割

entry里面配置多个入口，单页面还是多页面。如果所有的文件都在一个bundle里面的话bundle体积就会非常大。所以要把bundle拆开多个小文件。

optimization:{
    splitChunks:{
    chunks:’all'
    }
}

懒加载

先进行代码分割，再把要加载的文件import的时候加上webpackChunkName 标识
预加载的标识为 webpackPrefetch:ture

import(/* webpackChunkName:’test’, webpackPrefetch:true */ ‘.test’).then(({mul}) = > {
    console.log(mul(4, 5))
})

PWA (Progressive web apps，渐进式 Web 应用)

• Discoverable, 内容可以通过搜索引擎发现。
• Installable, 可以出现在设备的主屏幕。
• Linkable, 你可以简单地通过一个URL来分享它。
• Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
• Progressive, 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
• Re-engageable, 无论何时有新的内容它都可以发送通知。
• Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
• Safe, 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。
  workboxWepackPlugin

多进程打包

npm i thread-loader -D

在babel-loader外面套一个thread-loader
缺点：进程启动大概为600ms，进程开销比较大。
适用于工作消耗时间比较长的编译loader，比如编译js的babel-loader相对css就比较耗时。

externals

忽略一些包被打包进来，注意如果要使用这个库就要在html文件里面的script标签里面引用

externals:{
    jquery:’jQuery'
}

dll

和externals类似，可以将某些第三方依赖包统一打包到dll文件中。
把一些固有的库都先打包到dll文件里面。这样打包1次后面就不用每次都打包了。可以让第2次打包的过程变快。提升构建速度。

1.报文(message)
我们将位于应用层的信息分组称为报文。报文是网络中交换与传输的数据单元，也是网络传输的单元。报文包含了将要发送的完整的数据信息，其长短不需一致。报文在传输过程中会不断地封装成分组、包、帧来传输，封装的方式就是添加一些控制信息组成的首部，那些就是报文头。

2.报文段（segment）
通常是指起始点和目的地都是传输层的信息单元。

3.分组/包(packet)
分组是在网络中传输的二进制格式的单元，为了提供通信性能和可靠性，每个用户发送的数据会被分成多个更小的部分。在每个部分的前面加上一些必要的控制信息组成的首部，有时也会加上尾部，就构成了一个分组。它的起始和目的地是网络层。

4.数据报(datagram)
面向无连接的数据传输，其工作过程类似于报文交换。采用数据报方式传输时，被传输的分组称为数据报。通常是指起始点和目的地都使用无连接网络服务的的网络层的信息单元。

5.帧(frame)
帧是数据链路层的传输单元。它将上层传入的数据添加一个头部和尾部，组成了帧。它的起始点和目的点都是数据链路层。

6.数据单元（data unit）
指许多信息单元。常用的数据单元有服务数据单元（SDU）、协议数据单元（PDU）。
SDU是在同一机器上的两层之间传送信息。PDU是发送机器上每层的信息发送到接收机器上的相应层（同等层间交流用的）。

下面是网络模型中每一层对应的信息情况

应用层——报文(message)
传输层——数据段/报文段(segment) (注：TCP叫TCP报文段，UDP叫UDP数据报,也有人叫UDP段)
网络层——分组、数据包（packet）
链路层——帧（frame）
物理层——P-PDU（bit）

在了解WebSocket之前需要先了解socket是什么。
首先要知道，现在任何的网络协议都是基于socket协议。
socket的中文翻译叫“套接字”，然而这个中文翻译非常晦涩难懂，很难解释清楚。
其实socket直接翻译过来的含义是插座的意思。
我的个人理解就是2个人互相发送文件的时候，如果发1个文件就在插座上插1条线，再发另外1个文件就再插1条线。不管是发文件还是收文件，都是通过插座上面的线来传输，这个线就叫“线程”。而插座就是为了“创建”和“关闭”这些“线程”而设计的。

先看一下socket的流程图

我们发现socket的流程非常简单，主要分三步
1.创建
2.收发
3.关闭
程序中创建socket协议通常有两个参数，第一个为ip协议规范（ipv4/ipv6），第二个为协议类型(TCP/UPD)
例如PHP的socket_create方法，socket_create ( int $domain , int $type , int $protocol ) : resource
具体参数对应的含义请查看文档

接下来正式说明什么是WebSocket
定义：WebSocket是一种在单个TCP连接上进行全双工通信（同时双向发送数据）的协议。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
http协议url地址是长这样http://example.com:/some/path
而websocket协议的地址是这样ws://example.com:80/some/path

在客户端使用WebSocket非常简单

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { //连接成功后的回调
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) { //接收数据
console.log( "Received Message: " + evt.data);
ws.close();
};

ws.send('your message’); // 发送数据

ws.onclose = function(evt) { // 连接关闭后的回调
console.log("Connection closed.");
};

服务端使用WebSocket如果是NodeJS常用的就是
Socket.IO
如果用java就是Tomcat7.0以上
PHP用swoole

WebSocket协议的优点是什么？
最大的优点就是在实现即时通讯的方法上面更节省资源。
先说下面两种及时通讯方式的缺点
HTTP轮询：因为是单向通信，1次请求对应一次响应，然后关闭连接。如果服务端没有最新信息，那么就有大量的空响应回来，也就是无意义的请求，浪费资源。
Socket长连接：一旦建立连接就不会关闭，如果服务端没有最新数据，那么线程被占用，却没有收发数据，比轮询的方式还浪费资源。
WS协议：先用HTTP的方式握手建立连接，然后用socket的长连接方式保持通话，再用HTTP的方式挥手关闭连接。结合了上面两种方式的优点，是目前的最优手段。