前端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')
}),

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')
}),
本文转载于网络 如有侵权请联系删除

相关文章

  • 21天Python进阶学习挑战赛打卡------第3天(json标准库学习)

    json标准库学习JSON简介JSON长啥样JSON注意事项JSON模块1、json.loads()2、json.dumps()3、json.load()4、json.dump()JSON简介JSON(全名:JavaScriptObjectNotation对象表示法)是一种轻量级的文本数据交换格式,JSON的数据格式其实就是python里面的 字典格式,面可以包含訪括号括起来的数组,也就是python里面的列表。JSON独立于语言JSON具有自我描述性,更易理解JSON比XML更小更快,更易解析爬虫经常经常会获取接数据,接口数据就是JSON格式JSON长啥样{ "_id":1, "name":"ZJ", "age":22, "date":"2022.08.03" }复制JSON注意事项json的键必须用双引号值中不允许出现function,undefined,Nan,可以使用null结尾不允许出现无意义的逗号JSON模块 格式转换表PythonJSONdict

  • Python常见问题 - pip报错 ValueError: Unable to find resource t64.exe in package pip._vendor.distlib

    背景执行以下命令更新pip库时报错e:\py36\python.exe-mpipinstall--upgradepip'复制解决方法卸载setuptoolspython-mpipuninstallpipsetuptools复制重新安装setuptoolspipinstall--upgradesetuptools复制

  • 开源堡垒机 Jumpserver 1.4.7 发布

    开源堡垒机Jumpserverv1.4.7已发布,修改了配置文件的格式,使用yaml方式配置。本版本主要更新的内容如下:支持radius认证统一生成coco的hostkey,这样部署多个coco也不需要再复制Hostkey权限列表增加详细过滤更改配置文件类型为yml格式修改心跳方式优化任务执行的日志记录方式修复节点右击测试连接资产为节点下所有资产,而不是直接资产sftp支持修改home目录,支持不显示隐藏文件修复luna隐藏侧边栏的bugluna支持直接登录到某个资产更新说明Jumpserver是全球首款完全开源的堡垒机,使用GNUGPLv2.0开源协议,是符合4A的专业运维审计系统。Jumpserver使用Python/Django进行开发,遵循Web2.0规范,配备了业界领先的WebTerminal解决方案,交互界面美观、用户体验好。Jumpserver采纳分布式架构,支持多机房跨区域部署,中心节点提供API,各机房部署登录节点,可横向扩展、无并发限制。下载地址:Sourcecode(zip)Sourcecode(tar.gz)

  • 手机199开头的号码的正则验证

    以前的正则验证里面,如果是199开头或者166开头的手机号码就没有办法通过验证,会给这些用户带来一定的麻烦/*手机号码验证*/ var$phone_num=$("#phone").val(); varreg01=/^1[3|4|5|6|7|8|9]\d{9}$/;//手机号 if(reg01.test($phone_num)){ console.log("手机号正确"); }else{ layer.msg('请填写正确手机号',{ icon:5, time:1000 }); return; }复制demo<!DOCTYPEHTML> <html> <head> <title></title> <metaname="viewport"content="width=device-width,initial-scale=1"> <metahttp-equiv="Content-Type"conte

  • 平均年薪30万!人才缺口500万!人工智能工程师为什么这么火?

    问一个很现实的问题,以你目前的薪资,多久能赚到100万? 在一线城市,年薪10万仅能饱腹,就算熬夜加班苦干10年达到100万,相信也所剩无几。所以要想多赚钱,就要持续学习、更新能力,抓住行业机遇。在人工智能时代,无论是科研院所,商业巨头还是初创企业,各行各业都在大力开发或者引进人工智能,导致人工智能人才现在出现巨大缺口。工信部教育考试中心副主任周明透露,中国人工智能人才缺口可能超过500万人。领英全球AI领域技术人才分布图人才供不应求,导致领域岗位的薪资也自然水涨船高,给大家看一组最新数据:2018年最新数据:python、大数据、人工智能从业者薪资表行业紧俏、薪资诱人,使很多人都想在这股AI热潮中,凭借实力和简历脱颖而出。然而,很多人在第一关就被HR刷掉了,更别说技术面了。资深HR说:“如果只学过计算机专业,想进入BAT人工智能部门、明星创业公司等其实并没那么容易,因为你没有实操的项目,你对人工智能没有整体性和深度性的把控和学习。”但这是不是就意味着你没机会了?不。你可以自学,也可以跟着这方面的专家导师学。其实人工智能的核心就是机器学习(MachineLearning)和深度学习。而

  • 谭东宇:智慧城市最后一公里 —— 数字化园区建设

    12月15日,由腾讯云主办的首届“腾讯腾讯云开发者社区开发者大会”在北京举行。本届大会以“新趋势•新技术•新应用”为主题,汇聚了超40位技术专家,共同探索人工智能、大数据、物联网、小程序、运维开发等热门技术的最新发展成果,吸引超过1000名开发者的参与。以下是物联网分会场的演讲内容,稍作整理,分享给大家。当前,城市的快速发展促使城市中的最小单元——社区或园区的智能化建设加速。于此同时,政府的数字化进程的推动、物联网技术的快速发展、终端设备的不断迭代和创新以及新技术、新产品、新应用等科技的高速发展,促使智慧城市发展重点转向更具复杂度的园区或社区的数字化、智慧化改造。在这里所介绍如何将智慧城市建设的理念浓缩到数字化/智慧化园区/社区的建设中,如何将园区内发生的一切都归纳为为“事件”,从而更好的处理这些具有高度复杂业态和治理环境的微小区域的每一个细微末节。这里我们提出:充分利用物联网和大数据分析等新技术,实现园区智慧化建设的“发现即处理、全程可视化”的核心理念。当前大背景下,政府数字化进程的推动,以及物联网的快速发展和新技术的不断更新,以及物联网等一些新技术突飞猛进,包括2020年国家要全面

  • 人工智能将为传统制造业带来什么?

    石泽:吴恩达离开百度后,将创业项目聚焦在制造业,希望通过为制造业转型提供技术、培训、运营流程管理等解决方案,成为这一领域的AI服务提供商。“物理世界”(以制造业设备所代表)和“数字世界”(由人工智能、传感器等技术代表)的碰撞催生了制造业的巨大的转变。两个世界的融合将为下一轮经济发展注入新的动能。以人工智能为代表的新技术正在对生产流程、生产模式和供应链体系等生产运营过程产生巨大影响。据埃森哲公司测算,到2035年,人工智能技术的应用将使制造业总增长值(GVA)增长近4万亿美元,年度增长率达到4.4%。作为新的“生产要素”,人工智能对于制造业的影响有几方面:(1)机器将部分取代人的工作,实现智能自动化。在中国、日本等国家,可以弥补由于老龄化、人力资源成本提升带来的劳动力短缺问题。(2)人工智能通过增强劳动力技能带来生产效率的提升,以提高人的效率,经过重新培训的员工可以执行更高级的设计、编程和维护任务或创造性的工作。(3)人工智能与制造业的深度融合不但将加速新产品的开发过程,还将彻底颠覆原有的生产流程,人工智能程序不仅可以自动完成任务,而且还可以实现全新的业务流程。比如,根据客户的个性化需求

  • N1QL为NoSQL数据库带来SQL般的查询体验

    关系型数据库已经流行了超过40年,在这个过程中SQL也成为了操作关系型数据库的标准。SQL将数据的存储方式进行了包装和抽象,使开发人员可以专注于程序逻辑。对开发人员工作的简化也是SQL甚至关系型数据库流行的原因。社会在发展,数据在变化。从社交网络、科学研究、物联网等数据源产生的数据已经不局限于某个固定的结构,因此对于这些数据擅长结构化数据的关系型数据库就难以处理了。关系型数据库最好有固定的schema,这也使得满足现代商业要求的敏捷性和快速迭代变得困难。动态schema不仅仅要求我们重新思考数据模型和数据库,我们还需要一门新的查询语言来读取这些数据。数据模型我们先来看看数据模型。九十年代开始随着图形界面应用和Web应用的流行,多数商业应用的程序都使用面向对象的开发模式。对于Web应用来说JSON是表示数据对象的标准,服务器和应用之间交换的就是一个个JSON文件。两千年左右NoSQL数据库开始流行起来,NoSQL数据库的目的就是方便存储和管理JSON文件。JSON数据库很受开发人员的喜爱,因为它表示数据的方式和其他面向对象的程序设计语言如Java、C++、.NET、Python和Ruby

  • springboot中使用自定义两级缓存

      工作中用到了springboot的缓存,使用起来挺方便的,直接引入redis或者ehcache这些缓存依赖包和相关缓存的starter依赖包,然后在启动类中加入@EnableCaching注解,然后在需要的地方就可以使用@Cacheable和@CacheEvict使用和删除缓存了。这个使用很简单,相信用过springboot缓存的都会玩,这里就不再多说了。美中不足的是,springboot使用了插件式的集成方式,虽然用起来很方便,但是当你集成ehcache的时候就是用ehcache,集成redis的时候就是用redis。如果想两者一起用,ehcache作为本地一级缓存,redis作为集成式的二级缓存,使用默认的方式据我所知是没法实现的(如果有高人可以实现,麻烦指点下我)。毕竟很多服务需要多点部署,如果单独选择ehcache可以很好地实现本地缓存,但是如果在多机之间共享缓存又需要比较费时的折腾,如果选用集中式的redis缓存,因为每次取数据都要走网络,总感觉性能不会太好。本话题主要就是讨论如何在springboot的基础上,无缝集成ehcache和redis作为一二级缓存,并且实现缓

  • 一个通用的 Builder构建器写法

    在平时开发中,Builder方式采用的流式对象创建,我们经常用到,比如Guava的CacheBuilder,如:CacheBuilder.newBuilder() .maximumSize(10000) .expireAfterAccess(2,TimeUnit.MINUTES) .expireAfterWrite(10,TimeUnit.MINUTES) .initialCapacity(100) .build();复制又如Curator中的:CuratorFrameworkcuratorFramework=CuratorFrameworkFactory. builder(). connectString(server.getConnectString()). sessionTimeoutMs(1000). retryPolicy(newRetryNTimes(3,1000)). build();复制本文主要来探讨一下,有没有一种通用的写法能够完成。其实,目前主要可以采用2种方式来实现:使用Lombok神器使用JDK1.8后的Supplier 使用Lombok神器根据Lombok官

  • [.NET领域驱动设计实战系列]专题八:DDD案例:网上书店分布式消息队列和分布式缓存的实现

    一、引言    在上一专题中,商家发货和用户确认收货功能引入了消息队列来实现的,引入消息队列的好处可以保证消息的顺序处理,并且具有良好的可扩展性。但是上一专题消息队列是基于内存中队列对象来实现,这样实现有一个弊端,就是一旦服务重启或出现故障时,此时消息队列中的消息会丢失,并且也记录不了日志。所以就会出现,商家发货成功后,用户并没有收到邮件通知,并且也没有日志让我们发现是否发送了邮件通知。为了解决这个问题,就需要引入一种可恢复的消息队列。目前有很多开源的消息队列都支持可恢复的,例如TibcoEms.net等。然而,微软的MSMQ也是支持这种特性的。并且MSMQ还支持分布式部署,关于MSMQ更多内容可以参考:http://www.cnblogs.com/zhili/p/MSMQ.html    在本专题中将介绍为网上书店案例引入分布式消息队列和分布式缓存的实现。 二、分布式消息队列的实现    MSMQ的实现原理是:消息的发送者把自己想要发送的信息放入一个容器,然后把它保存到一个系统公用空间的消息队列中,本地或异地的消息接收程序再从该队列中取出发给它的消息进行

  • php.ini session配置问题导致无法登录网站解决办法

    遇到的问题:   从外网拷贝一模一样的php代码、nignx配置、php-fpm.conf、php.ini到内网,在登录网站时怎么也登录不上,总是提示验证码不正确,验证失败,无法登录 软件版本:【不确定是不是nginx版本不同的原因】 内外网php5.6 外网nginxversion:nginx/1.12.1 内网nginxversion:openresty/1.17.8.2复制 解决流程: 1.确定配置文件没问题 2.找服务端查问题,屏蔽一些验证逻辑,最终发现应该是session的问题 3.从服务端得知是session的问题,意识到php.ini有session的配置选项 4.从网络上查找php.ini相关的session配置选项,最终配置如下复制 [Session] session.save_handler=files session.save_path="/tmp" session.use_cookies=1 session.name=PHPSESSID session.cookie_secure=Off session.auto_start=0 session.co

  • node3_path.join和path.basename、path.extname用法

    constpath=require('path') //../会抵消一级路径 constpathStr=path.join('/a','/b/c','../','./d','e') console.log(pathStr) //凡是涉及到路径拼接的问题,都要使用path.join方法,不能直接使用+ 复制       path.basename用法: constPath=require('path') constfullPath='a/b/index.html' letname=Path.basename(fullPath)//index.html,第一个参数是获取带有后缀的文件名 console.log(name) name=Path.basename(fullPath,'.html')//第二个参数是去掉文件名的后缀 console.log(name) 复制      constpath=require('path') constfullPath='a/b/index.html' constext=path.extname(fullPath)

  • jenkins shell常用配置

    1:shell替换文件内容,使用sed-i命令进行替换,如果遇到双引号.需要做转换处理,否则运行命令会报错。 echo'替换PC端的环境变量开始' #sed-i's/需要替换的字符串/替换后的字符串/'替换所在的路径文件全路径 sed-i's/environment=\"dev\"/environment=\"test\"/'./test/web/test/js-v/config.js echo'替换PC端的环境变量完成' 复制        2:shell杀死tomcat进程 #查询tomcat8的进程,将pid获取到,判断pid是否存在,存在则杀死进程 pid=`ps-ef|grepapache-tomcat-8|grep-vgrep|awk'{print$2}'` if[-n"$pid"];then kill-9$pid fi 复制    3:使用tomcat内置的脚本杀死进程 #定义tomcat8的目录地址tomcat_home=/opt/apache-tomcat-8 #调用tomcat的bin命令杀死进程 sh$tomcat_home/

  • JAVA中的继承初始化

    最近在看《ThinkinJAVA》,这是其中的一节内容,没怎么看明白,动手写了一段 classObjInit{ ObjInit(){ System.out.println("ObjInit"); } privatestaticintx=testInit(); privatestaticinttestInit(){ System.out.println("ObjInitstaticinit"); return2; } } classObjInit2extendsObjInit{ ObjInit2(){ System.out.println("ObjInit2"); } privatestaticintx=testInit(); privatestaticinttestInit(){ System.out.println("ObjInit2staticinit"); return2; } } publicclassObjectInitTestextendsObjInit2{ publicstaticvoidmain(String[]args){ //TODOAuto-genera

  • Daily life团队冲刺博客 七

    目录今日完成任务今日燃尽图成员遇到的问题项目进展各个成员今日对项目的贡献量会议图片项目的发布说明本版本的新功能软件对运行环境的要求系统已知的问题和限制软件的发布方式以及发布地址: 今日完成任务 杨凯涵:准备答辩。 吴东泽:准备答辩。 王振澳:准备答辩。 姬旭:准备答辩。 曹骞:准备答辩。 今日燃尽图 成员遇到的问题 idea里运行的API无法在安卓里使用 起初在idea里成果的运行了java的api代码,并且可以获取出某个城市的天气等数据,但是当放到安卓的程序里面时,我们发现安卓里实现方法和idea里几乎完全不一样,不仅代码不一样还要设置许多内容,所后面换了一个公司的api,并重新配置。 listview的问题 因为listview这个东西只能在oncreat,即main里面使用,直接读取数据库的数据放到里面会比较麻烦,而刚好我们学了数据结构,于是写了一个habit类,以habitlist的方式把数据库里面的数据放到listview里,这样方便也省事。 项目进展 答辩已准备完毕. 各个成员今日对项目的贡献量 杨凯涵:3 吴东泽:3

  • 数据结构 KMP 串的模式匹配 (25 分)

    给定两个由英文字母组成的字符串String和Pattern,要求找到Pattern在String中第一次出现的位置,并将此位置后的String的子串输出。如果找不到,则输出“NotFound”。 本题旨在测试各种不同的匹配算法在各种数据情况下的表现。各组测试数据特点如下: 数据0:小规模字符串,测试基本正确性; 数据1:随机数据,String长度为 10​5​​,Pattern长度为 10; 数据2:随机数据,String长度为 10​5​​,Pattern长度为 10​2​​; 数据3:随机数据,String长度为 10​5​​,Pattern长度为 10​3​​; 数据4:随机数据,String长度为 10​5​​,Pattern长度为 10​4​​; 数据5:String长度为 10​6​​,Pattern长度为 10​5​​;测试尾字符不匹配的情形; 数据6:String长度为 10​6​​,Pattern长度为 10​5​​;测试首字符不匹配的情形。 输

  • 全排列问题

    先定义两个数组,一个是用来存放解的,一个是用来标记该数是否用过。 先判断格子是否填满了,如果填满,则输出。 如果没有填满,则开始循环,在循环中先判断当前填的数是否用过,如果没有,则填入,搜索下一格。 #include<bits/stdc++.h>usingnamespacestd;inta[10],b[10],n,ij;voidss(intsss){ if(sss==n){ for(inti=1;i<=n;i++){ printf("%5d",b[i]); } cout<<endl; return; } for(inti=1;i<=n;i++){ if(a[i]!=0){ b[sss+1]=i; a[i]=0;//标记 ss(sss+1); a[i]=1;//回溯 } }}intmain(){ cin>>n; for(ij=1;ij<=n;ij++){ a[ij]=1; } ss(0);}

  • 学习qt,做了一个小应用:随机点名提问系统

    最近在研究学习qt,qt是一个跨平台的基于C++的应用程序开发框架。 感觉这个qt开发起来还是非常简单的,封装了很多功能,开发效率还是非常高的。然后迫不及待的做了一个小案例,就实现了很简单的一个功能:随机点名提问功能。   1、qt下载qt下载地址:https://download.qt.io/new_archive/ 我下载的是qt5.6.3版本的,qt-opensource-windows-x86-mingw492-5.6.3.exe这个版本已经内置了qtcreator开发工具,不用额外下载qtcreator   2、随机点名提问系统 系统界面效果: 源码已经上传到:https://gitee.com/modoucn/dianming 想直接使用这个工具的话,可以到这里下载,我是封装成一个exe,直接运行即可:https://gitee.com/modoucn/dianming/blob/master/bin/dianmingV1.zip 应用使用方法:需要先准备人员名单数据文件,将data.txt人员名单数据文件放到程序同级目录下,文件格式为一行一个姓名 &

  • git--------------bug修复流程

    当前所有分支:   master:主分支   test:测试分支   zs:开发人员分支   ls:开发人员分支 场景:zs正在开发A模块功能,线上环境产生了一个bug。 zs的操作流程(当前分支为zs分支):   1、gitstash //把当前工作现场“储藏”起来,等以后恢复现场后继续工作   2、gitcheckoutmaster  //切换到主分支   3、gitcheckout-bbug001  //从master当前最新提交的节点创建bug001分支   4、gitcheckoutbug001  //切换到bug001分支   5、修复bug。。。。。。。   6、gitadd.    7、gitcommit   8、gitrebasemaster#将bug001分支上的修改在master分支上做一次衍合处理       #git提示出现了代码冲突,此处为之前埋下的冲突点,处理完毕后       gitaddreadme   #添加冲突处理后的文件       gitrebase--continue  //加上--continue参数让reba

  • Spring Boot 项目实战(二)集成 Logback

    一、前言 上篇介绍了SpringBootMaven多模块项目的搭建方法以及MyBatis的集成。通常在调试接口或者排查问题时我们主要借助于日志,一个设计合理的日志文件配置能大大降低我们的排查难度,本篇主要介绍Logback集成步骤。 二、集成Logback 2.1引入依赖包 其实SpringBoot提供的父工程中已经包含了所依赖的Logbackjar包,可通过项目父pom中的「spring-boot-starter-parent」>>「spring-boot-dependencies」找到Logback的三个依赖包。 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-access</artifactId> <version>${logback.version}</version> </dependency> <dependency> <groupId>ch.qos.logb

相关推荐

推荐阅读