JavaScript和CSS的版本问题与浏览器缓存——为什么要前端自动化构建

前端在加载网站时，JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件

浏览器缓存文件经常会出现的问题：

即使在源代码中修改了，客户依然看不见效果

出现问题的原因：

浏览器未清楚缓存

解决办法：

加一个版本号,浏览器会将它识别为新文件并重新加载它

比如原来是 http://www.a.com/app.js 你现在只需要把地址改为http://www.a.com/app.js?v=1.0

使用前端自动化构建工具如gulp（grunt更旧，资源更少，插件生态更匮乏）

1.解决JavaScript和CSS的在页面中的顺序问题

2.文件压缩:去掉空格换行等

3.Vendor前缀：不同的浏览器CSS有不同的前缀，构建工具自动添加CSS的Vendor前缀

4.文件合并：浏览器有并发限制，也就是同时并发只能下载几个文件，合并大量的js文件减少加载时间