关于性能优化，对于程序员来说一直是个绕不开的话题，后端有后端的方法，前端也有前端的方法，下面我们来看看前端方面的性能优化。
性能优化 分为两个层面
1.网络层面
2.页面的渲染层面
网络层面分为两方面：
1.请求过程的优化 也就是针对HTTP请求的优化
2.减少网络请求 也就是从前端存储这一方面进行的
网络篇（一）
一、webpack 性能调优与 Gzip 原理
先看一道面试题 ：从输入 URL 到页面加载完成，发生了什么？ 发生了以下这五个步骤
- DNS 解析
- TCP 连接
- HTTP 请求抛出
- 服务端处理请求，HTTP 响应返回
- 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
但是涉及到网络层面的，有三个主要过程：
- DNS 解析
- TCP 连接
- HTTP 请求/响应
前端要做的就是 对http进行优化
HTTP 优化有两个大的方向： - 减少请求次数 - 减少单次请求所花费的时间
最常见的操作就是资源的压缩与合并，也就是对webpack进行操作。
webpack优化存在的问题
webpack 的优化主要是两个方面：
- webpack 的构建过程太花时间
- webpack 打包的结果体积太大
优化方案
1.不要让 loader 做太多事情——以 babel-loader 为例
babel-loader 无疑是强大的，但它也是慢的。
最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译，
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
除此之外，我们还可以通过给 loader 增加相应的参数设定，开启缓存 将转译结果缓存至文件系统，
loader: 'babel-loader?cacheDirectory=true'
2.Happypack——将 loader 由单进程转为多进程
因为webpack 是单线程的，但是cpu是多线程的，happypack 会充分释放 CPU 在多核并发方面的优势，帮我们把任务分解给多个子进程去并发执行，大大提升打包效率。
3.通过Tree-Shaking(摇树优化) 删除冗余代码
意思是基于 import/export 语法，Tree-Shaking 可以在编译的过程中获悉哪些模块并没有真正被使用，这些没用的代码，在最后打包的时候会被去除。
举个🌰，假设我的主干文件（入口文件）是这么写的： import { page1, page2 } from './pages' show(page1) pages 文件里，我虽然导出了两个页面：
export const page1 = xxx
export const page2 = xxx
但因为 page2 事实上并没有被用到（这个没有被用到的情况在静态分析的过程中是可以被感知出来的），所以打包的结果里会把这部分：
export const page2 = xxx;
直接删掉，这就是 Tree-Shaking 帮我们做的事情。
4.插件按需加载
5.开启 Gzip。
具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
accept-encoding:gzip 优化方案
原理，是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使整个文件变小。文件 中代码的重复率越高，那么压缩的效率就越高,收益也就越大。
