建议购买原文，前端性能优化原理与实践，本文学习总结用。如有侵权，感谢联系，删除。

1、网络层

1）webpack

资源的合并和压缩

module: {
	rules: [{
		test: /\.js$/,
		exclude: /(node_modules|bower_components)/, //不打包
		use: {
			loader: 'babel-loader?cacheDirectory=true', //开启缓存，转义结果缓存到文件系统
			options: {
				presets: ['@babel/preset-env']
			}
		}
	}]
}

DllPlugin

将第三库打包成一个文件，这个文件就是一个单纯的依赖库。这个依赖库不会跟着你的业务代码一起被重 新打包，只有当依赖自身发生版本变化时才会重新打包
（详细配置见掘金小册，网络篇1）

Happypack

将 loader 由单进程转为多进程
（详细配置见掘金小册，网络篇1）

文件结构可视化，找出导致体积过大的原因 webpack-bundle-analyzer

（详细配置见掘金小册，网络篇1）

删除冗余代码 Tree-Shaking UglifyJsPlugin

（详细配置见掘金小册，网络篇1）

按需加载

（详细配置见掘金小册，网络篇1）

2）Gzip 压缩原理

Gzip 压缩背后的原理，是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使 整个文件变小。根据这个原理，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的 收益也就越大。

使用：request headers加上accept-encoding:gzip

HTTP 压缩就是以缩小体积为目的，对 HTTP 内容进行重新编码的过程，使用最多的是压缩文件是Gzip。

3) 图片优化

较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等

①、JPEG/JPG

关键字：有损压缩、体积小、加载快、不支持透明
使用场景：JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

②、PNG-8 与 PNG-24

关键字：无损压缩、质量高、体积大、支持透明
理论上如果不在乎文件体积推荐使用PNG-24，但实际会优先考虑使用PNG-8。
选择方式：用两个格式输出，看PNG-8是否区别不大，大家可接受
使用场景： PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对 比强烈的图片或背景等。

③ 、SVG

关键字：文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本 质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
使用：一种写入直接写入html，另一种（用比较多）将 SVG 写入独立文件后引入 HTML: <img src="⽂文件名.svg" alt="">

④、Base64

关键字：文本文件、依赖编码、小图标解决方案
Base64 并非一种图片格式，而是一种编码方式。
雪碧图：为了解决小图标的解决方案。
Base64 是作为雪碧图的补充而存在的。
Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将 编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数。

使用场景条件：

• 图片的实际尺寸很小（几乎没有超过 2kb 的）
• 图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径， Base64 是雪碧图的补充）
• 图片的更新频率非常低（不需我们重复编码和修改文件内容，维护成本较低）

推荐使用：利用 webpack 来进行 Base64 的编码——webpack 的 url-loader

⑤、WebP

关键字：年轻的全能型选手
WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态 图片——它集多种图片文件格式的优点于一身。
使用场景：兼容性问题

很多不知道从何下手时，可以打开优秀的网站看看