1 页面
(1)通过文件合并、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。
(2)通过 DNS 缓存等机制来减少 DNS 的查询次数。
(3)通过设置缓存策略，对常用不变的资源进行缓存。
(4)使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
(5)通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。
2 CSS 和 JavaScript
(1)把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
(2)避免使用 @import 标签。
(3)尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。
(4)通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。
3 服务器
(1)使用 CDN 服务，来提高用户对于资源请求时的响应速度。
(2)服务器端启用 Gzip等方式对于传输的资源进行压缩，减小文件的体积。
(3)尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie
4 使用webpack进行项目优化
1先下载一个可以查看loader显示时间的包speed-measure-webpack-plugin
image.png
2在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。
image.png
用之前.png
用之后.png
3Happypack
image.png
整体时间降低了点
由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。
文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度
HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
4thread-loader
image.png
image.png
5 noParse
image.png
6HardSourceWebpackPlugin
image.png
6 webpack-dashboard 展示面板更清晰
其实本质上，我们对与webpack构建效率的优化措施也就两个大方向：缓存和多核。
缓存是为了让二次构建时，不需要再去做重复的工作；
而多核，更是充分利用了硬件本身的优势（我相信现如今大家的电脑肯定都是双核以上了吧，我自己这台公司发的低配 MAC 都有双核），让我们的复杂工作都能充分利用我们的 CPU。
而将这两个方向化为实践的主角，也是我们前面介绍过的两大王牌，就是：cache-loader 和 happypack
