掰开揉碎了讲SPA前端代码打包优化

[gzqby]

Q：把4M的文件拆成2个2M的文件，但是network加载时间看起来是一样的？（此分享的由来）

Q1：代码打包优化的目的是什么？

更快的加载，更省资源

Q2：更快的加载为了什么？

用户体验，看到网页，一个正常的网页

基于以上，我们可以做什么？

1. 代码压缩
2. 代码分拆
3. 缓存（CDN，前端）
4. 基础设施（网速、带宽、HTTP2等）

最终聚焦，我们能做的：

1. 代码压缩？
   a. 打包压缩
   b. gzip
2. 缓存
   a.CDN
   b. 前端强制缓存（SPA应用强制缓存是个大特点，不需要协商缓存，利用次特点，最大化分拆优势）

代码分拆？这里是个重点，分拆技术都会，到底怎么规划

要考虑的硬件点：1. 浏览器同时加载资源几路？6，同源。要考虑的软件点：1. SPA网站需要加载的资源巨多

a. 怎么并行最大化？多源6路
b. 怎么串行最大化？一次传输，不拆包，不重复建立通路
c. 怎么不请求
以上这两点，都是理想化的，因为网速、带宽，各个资源大小不一。但是其实还是能说明一个点，4M拆2个有点粗暴
折中方案：
a. 媒体资源不同源
b. 不需要一味优化代码体积，打包工具推荐2M用就完了
c. 缓存，强制缓存，关键要分包，把基础依赖资源利用MD5固定文件路径强制缓存下来，所以这个对应上面的基础包体积大，并不是啥问题