前端JS、CSS版本控制

前言

最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。

问题

用户 首次 通过浏览器打开网页时都会对 JS、CSS 文件 进行缓存，以便在下次打开时可以直接从缓存中取出，而不用重复地向服务器 再次请求；当用户再次通过浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css、图片）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Cache-Control有关，静态资源很少有设置成不缓存的，我这里默认它们都是可缓存），如果包含，就不去服务器获取了。

这个问题怎么解决？

普通处理方法：

每次更新前，在html文件内，将所有引用（URL）的JS和CSS文件名后面添加后缀?verson=20170927，如：Global.css?v=yyyyMMddv，虽然定位到的资源仍然是Global.css，但如果v的值不同，浏览器会认为是不同的资源。同理，对于JS、图片来说，也是如此。 ==> 但这种手动的处理方法有缺点就是：当文件很多的时候，需要一个个添加，容易出错和耗时耗力。

Vue的处理方法：

1. 关闭版本控制方法：

找到build/webpack.prod.conf.js文件，可以看到 ==>js文件：

output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

==>css文件：

new ExtractTextPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css')
}),

%title插图%num

%title插图%num

%title插图%num

2. 关闭版本控制方法： ==>js文件：

output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].js'),
     chunkFilename: utils.assetsPath('js/[id].js')
},

==>css文件：

new ExtractTextPlugin({
     filename: utils.assetsPath('css/[name].css')
}),