我看了很多网站的JS文件都是这样命名的，如 main.ae67878c87.js ,为什么要在文件的后缀前加上类似于唯一随机数的字符串 ？ 这些文件是工具自动生成的吗 ？
解决方案
这种写法，是为了静态资源的缓存。
命名方式为 [名字].[hash码].[后缀]
比如 main.77fr67fe.js 、 tu.67677dewf7.png、 app.u78ferfr78.css
为什么要这么做呢？
假如你的网站设置静态资源 例如 app.js 在用户浏览器缓存时间为1天。那么一天内，浏览器只会请求app.js一次，之后便只会从浏览器缓存中获取，不用像服务器发请求了，一是可以节省服务器的带宽，而是用户体验也变好了。
但是，这个时候，如果你更新了app.js，用户之前已经缓存了app.js，便不会再请求了，那么用户便使用了过期的app.js
因此，在文件名称中引入hash码（长度可设置，通常不同的文件生成的hash码是唯一的），文件发生变化，打包时，hash码也随之变化。
例如第一次访问，返回的HTML页面是
<html><body><script src="/app.123.js"></script></body></html>更新js文件后，app.js打包后的文件名为app.456.js，同时HTML变为
<html><body><script src="/app.456.js"></script></body></html>浏览器发现，没有app.456.js这个文件，因而去服务端请求，就不会出现继续使用过期的app.123.js的文件的情况了。
如果更新前后的请求均为
<html><body><script src="/app.js"></script></body></html>那么在缓存期限内，浏览器会一直使用之前缓存的app.js，而不会去请求新的app.js
而且，缓存时间可以设置为无限期缓存，只要hash码不发生变化，便不会再请求数据。服务器减轻了压力，用户拿到的永远是最新的静态资源（hash未更新，代表资源最新）。
如果使用webpack等前端打包工具，文件名中的hash码是自动生成的，而且可以自动注入到html中。
使用webpack打包css的配置如下
plugins: [ new ExtractTextPlugin('[name].[hash].css'), new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true })]