资源的合并与压缩

资源的合并与压缩分为两种：（1）减少http的请求数量 （2）减少请求资源的大小。

1. html压缩

压缩html是一种常见的方式，就和webpack压缩js脚本一样，他可以将一些对代码执行不造成影响的空格、制表符、换行符等，还有一些特殊意义的字符，比如注释等。都可以经过压缩从而减小html的体积。也就相当于减少了请求资源的大小。

如何进行html压缩？

1. 使用在线网站进行压缩（不推荐）

2. nodeJs提供html-minifier工具、webpack（推荐）

3. 后端模板引擎渲染

4. css压缩

css代码的压缩讲究的是对无效代码的删除。还有就是对相同语义代码的合并。

压缩可以借助webpack。

1. Js压缩与混乱

Js的代码压缩讲究一下三点：

1. 无效字符的删除，剔除注释

2. 代码语义的缩减和优化：比如把长的变量名变成a、b这样的短字符。再比如a =1； a=2，那就不如直接优化成a=2。

3. 代码保护：代码保护可以说是上面两点带来的产物。前端代码是暴露在控制台中的。用户可以轻易的窥见代码，向上面说的方式对代码进行压缩，就可以达到混乱js代码的作用，从而提高了安全性，还提高了性能。

压缩方式：

1. 使用html-minifier、webpack等构件工具对html中的js进行压缩

2. 使用webpack对js进行压缩。

3. 文件合并：

文件的合并讲究的就是一次性减少请求的数目，看下图可以很容易感受到合并文件和不合并文件带来的差异：

如果不压缩，在三次握手之后就要多次请求服务器。增加了N-1个网络延迟。还带了了很多负面影响。

补充说明：因受进程限制，浏览器的同时并发请求文件的数量是有限，比如我们有100个script标签请求不同的标签，那么

但是文件合并也存在着问题，通常情况下会带来以下几种问题：

1. 首屏渲染问题

2. 缓存失效问题

首屏渲染问题其实很好理解，这就好比我们通过webpack将多个js文件通过打包到一个js的出口文件时，浏览器就不得不一次性加载完整个js文件后才能渲染页面，如果js文件本身比较大，像是Vue，React这种大型框架的静态资源和js文件一同打包，就会造成首屏渲染速度很慢的问题。

缓存失效问题也很好理解，我们标记一个js文件的时候会对js文件加一个md5戳（比如说Etag，或者文件名为content_hash），这个md5戳就是判断js文件是否发生改变的唯一标识。如果我们把多个js文件合并进入一个js文件下，就会导致一个js部分修改，合并之后的整个js文件都会发生变化。浏览器就会重新对整个合并之后的js文件进行重新加载，也就是我们所说的缓存失效。

优化建议：

1. 只对公共库（静态资源）进行合并

2. 不同页面进行合并：这主要是针对SPA的：我们不必要在一开始就将整个spa的所有js文件都进行加载，只需要对当前路由下的js文件进行加载即可，因此我们可以选择只对同一个路由下的js进行合并，然后使用异步加载组件的方式去加载各个路由下合并的js即可。

优化方式：

1. Webpack

TIP：当然webpack也为我们提供了code splitting,可以通过代码分割的方式去解决这个问题。不过这就相当于又回归不合并请求的方式了。因此只对大的静态资源进行代码分割才是正确的优化策略。

注意：webpack code splitting的优化方式在webpack的学习笔记中有写过。