前端JS、CSS版本控制

产生的原因:

用户在浏览器浏览某个网页,浏览器在加载网页中包含的各个资源(JS、css、图片)时,先会判断缓存中是否已经包含了此资源(当然这与Header中定义的Cache-Control有关,静态资源很少有设置成不缓存的,我这里默认它们都是可缓存),如果包含,就不去服务器获取了。

普通处理方法:

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

Vue的处理方法:

找到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')
}),

js文件

css文件

index.html文件

关闭版本控制方法:
==>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')
}),

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,079评论 19 139
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,726评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,584评论 1 19
  • 我是着实没想到一天的好心情说去就去了。中午搓去满是南瓜泥的手,手机一震,一条消息,说要约我出来喝茶,叙一叙...
    萧北笙烟阅读 303评论 0 3