前端静态资源优化

在网页性能优化中，为了能快的载入网页，有很多优化手段，其中一种命题，是如何降低网站的传输比特，使得在相同的带宽下，可以更快地载入需要的数据。

最小化代码

现在前端使用构建工具例如 webpack，gulp 都会使用到 minify code 这样的功能。

脚本最小化比较简单，方法一般有删除多余空格和不必要字符或注释，替换过长的字符变量等。

大部分构建工具都会内置最小化的工具，例如 webpack 中有 UglifyjsWebpackPlugin，使用 uglify JS3，一般不需要开发者担心。

压缩文本

为了进一步降低带宽，开发者可以配置静态资源服务器进行 gzip 压缩传输。例如在 nginx 中就可以配置 gzip 压缩。但是需要注意的是 compress 是一种用运算换带宽的方法，会进一步加重服务器性能负担。另外注意的是这里说明的是压缩文本，对于图片和大文件等不适宜采取压缩方法，因为对于图片，使用静态压缩比较适合，而大文件则会严重加重服务器负担，而且效果还不明显。

减少库使用

在引入库的时候，尽量引入子库。不要因为要使用某个功能或函数，就引入整个库，在控制容量方面，这很致命。例如要使用 debounce 而引入整个 lodash 库。按需导入才是引用库的正解。

import _ form 'lodash';  //不要引入整个库
import _debounce from 'lodash/debounce'; //引入子库

这里需要注意的是，在 webpack3+版本中使用了 tree shaking 技术，原理是使用了 es6 的静态引入分析。但是，现在大部分的前端项目都使用了 babel，使用的模块化方案是 commonJS，tree shaking 名存实亡。还是需要开发者按需导入。

流行库 CDN 加速

使用流行库例如 JQuery，Bootstrap，Lodash 等，可以使用 CDN 加速。但是在现代构建工具例如 webpack 中使用这种技术则会比较生硬。你需要在构建的入口 html 中，添加库引用，然后还要在全局定义一个变量。实际上，现代框架对全局变量的态度都是拒绝使用的。但是 CDN 加速有时候有时候又是不可避免的。

图片优化

web 中图片的优化主要有一下几种策略：选择正确的格式，调整图片分辨率，图片压缩，懒加载等。前三种就不多说了，说说懒加载。图片懒加载技术应该提升网站用户体验非常重要而常用的手段。懒加载除了可以节约用户流量外，还可以有效提升网页加载速度，因为浏览器不用去加载，渲染这些资源。详细可以看google-Developer Lazyload。

资源合并

资源合并在构建工具中用的很多，例如在 webpack 中可以把整个项目的代码包括库都打包进一个 main.js 的文件当中。这样可以节约 httpRequest。浏览器对于同一个域（注意是域而不是网页）可以并行的 httpRequest 是有限的，例如在 chrome 中，是 6 个，所以减少 httpRequest 可以有效提高网页加载速度。

图片资源则可以使用 sprite。例如在 svg 或 icon 中都会使用 sprite，同样可以有效减少 httpRequest 数量。

cookie-free

cookie-free domain 主要还是用在一些静态资源上，由于浏览器向服务器通讯时需要带上 cookie，这会增加上行带宽的消耗，对于 js，css，图片等不需要 cookie 访问的资源可以使用 cookie-free。具体方法是使用不同域的静态资源服务器，这样由服务器设置的 cookie 不会设置到静态资源服务器上。避免发送无用的 cookie。