您现在的位置是:首页 > Javascript
当前栏目
前端JS、CSS版本控制
2023-02-25 18:20:36 时间
前言
最近面试,问道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')
}),
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')
}),
相关文章
- JavaScript数据类型浅析
- Odoo 增加web后端的响应能力
- JavaScript 数据类型
- JavaScript 常用自定义功能函数
- 阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口
- 【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
- jQuery添加dom节点的方法
- jQuery 替换元素中class的方法
- WordPress网站js脚本延迟和异步加载教程
- HTML 锚点三种实现方法
- 解决css引用字体跨域问题
- js去除字符串空格
- JS中的八大数据类型
- CSS属性继承有哪些?(回顾)
- js 继承的是什么?如何实现继承?
- js同步和异步的区别是什么?
- v-model 基本原理 ?(回顾)
- 2021年web前端面试集锦