前端性能优化-静态资源优化9-打包

本文地址： https://www.cnblogs.com/veinyin/p/14274308.html

 

1 打包方案

1. 公共组件拆分（共用 JS 抽离为组件，减小 JS 文件大小）

2. 文件压缩（CSS、JS、图片等）

3. 合并（多个 CSS、JS 文件，雪碧图等）

4. Combo（将多个小文件请求合并；http://xxx/?a.js,b.js）

2 版本号更新策略

1. 缓存更新（CDN 或 vue 后台刷新文件 URL，更新文件 header 头）

2. 文件名拼一个版本号（可能导致多次迭代后存在很多个不同版本文件，可统一时间处理这些文件）

3. 文件名拼一个时间戳（文件没有更新时 URL 也会变更，导致缓存失效）

4. 文件名拼内容做 key 得到的 Hash 值（文件不变时不会更新 URL，缓存一直有效）