您的当前位置:首页正文

vue增加强缓存和版本号的实现方法

2023-12-06 来源:站点网
导读const Timestamp = new Date().getTime();mole.exports = {    // webpack配置    chainWebpack: config => {        if (process.env.NODE_ENV === 'proction') {            // 给js和

强缓存:

到底什么是强缓存?强在哪?其实强是强制的意思。当浏览器去请求某个文件的时候,服务端就在respone header里面对改文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。

强缓存实现:

cache-control: max-age=315360000, public ,immutable

客户端和代理服务器都可以缓存该资源,在315360000秒(10年)的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求

参考文章"彻底弄懂强缓存与协商缓存"

index.html文件采用协商缓存,理由就是要用户每次请求index.html不拿浏览器缓存,直接请求服务器,这样就保证资源更新了,切记不要设置强缓存!!!

其他资源采用强缓存 + 协商缓存,理由就不多说了。

nginx配置

版本号管理在

.env.production 生产模式

.env.test 测试模式

VUE_APP_VERSION = T0.01 测试模式VUE_APP_VERSION = V0.01 生产模式

在package.json配置了打包命令

npm run build 正式环境配V0.01版本号npm run build:test 测试环境配T0.01版本号

通过webpack打包设置,name+版本号+时间戳.js

可以根据服务器设置强缓存,缓存静态文件

configureWebpack: { output: { // 
输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, chunkFilename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, },}

小编还为您整理了以下内容,可能对您也有帮助:

VUE vue-cli3配置打包后的文件加上版本号

const Timestamp = new Date().getTime();

mole.exports = {

    // webpack配置

    chainWebpack: config => {

        if (process.env.NODE_ENV === 'proction') {

            // 给js和css配置版本号

            config.output.filename('js/[name].' + Timestamp + '.js').end();

            config.output.chunkFilename('js/[name].' + Timestamp + '.js').end();

            config.plugin('extract-css').tap(args => [{

                filename: `css/[name].${Timestamp}.css`,

                chunkFilename: `css/[name].${Timestamp}.css`

            }])

        }

    }

}

VUE vue-cli3配置打包后的文件加上版本号

const Timestamp = new Date().getTime();

mole.exports = {

    // webpack配置

    chainWebpack: config => {

        if (process.env.NODE_ENV === 'proction') {

            // 给js和css配置版本号

            config.output.filename('js/[name].' + Timestamp + '.js').end();

            config.output.chunkFilename('js/[name].' + Timestamp + '.js').end();

            config.plugin('extract-css').tap(args => [{

                filename: `css/[name].${Timestamp}.css`,

                chunkFilename: `css/[name].${Timestamp}.css`

            }])

        }

    }

}

【解决彻底】vue前端发版后要刷新才能看到更新问题

前端在开发应用的时候,合理利用缓存可提高应用性能。但有些缓存会给我们带来困扰,比如前端每次发版,浏览器存在缓存要刷新才能看到更新,这种体验很不好。针对这个问题我总结了两种有效方案。

vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。关键在于index.html文件它会被浏览器缓存。浏览器访问的还是旧的静态资源。解决办法如下,在meta标签禁止浏览器缓存 html

每次发版都应该有个版本号,很多开发者忽略了这个问题。这里我就用大白话说下我的思路。发版的时候我们把更新的版本号存放到静态文件中。然后定时用 ajax请求获取这个静态文件的版本号。最后跟浏览器内存中的版本号进行对比,如果不一致则说明有更新。js执行刷新页面。

【解决彻底】vue前端发版后要刷新才能看到更新问题

前端在开发应用的时候,合理利用缓存可提高应用性能。但有些缓存会给我们带来困扰,比如前端每次发版,浏览器存在缓存要刷新才能看到更新,这种体验很不好。针对这个问题我总结了两种有效方案。

vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。关键在于index.html文件它会被浏览器缓存。浏览器访问的还是旧的静态资源。解决办法如下,在meta标签禁止浏览器缓存 html

每次发版都应该有个版本号,很多开发者忽略了这个问题。这里我就用大白话说下我的思路。发版的时候我们把更新的版本号存放到静态文件中。然后定时用 ajax请求获取这个静态文件的版本号。最后跟浏览器内存中的版本号进行对比,如果不一致则说明有更新。js执行刷新页面。

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的理解是什么

keep-alive 是 vue 中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

keep-alive 可以设置以下 props 属性:

关于 keep-alive 的基本用法:

使用 includes 和 exclude :

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子( activated 与 deactivated ):

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ,这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ,这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置:src/core/components/keep-alive.js

可以看到该组件没有 template ,而是用了 render ,在组件渲染的时候会自动执行 render 函数

this.cache 是一个对象,用来存储需要缓存的组件,它将以如下形式存储:

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化,如下:

如果 include 或 exclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行 pruneCache 函数,函数如下:

在该函数内对 this.cache 对象进行遍历,取出每一项的 name 值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值:

拿到 key 值后去 this.cache 对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:

直接从缓存中拿 vnode 的组件实例,此时重新调整该组件 key 的顺序,将其从原来的地方删掉并重新放在 this.keys 中最后一个

this.cache 对象中没有该 key 值的情况,如下:

表明该组件还没有被缓存过,则以该组件的 key 为键,组件 vnode 为值,将其存入 this.cache 中,并且把 key 存入 this.keys 中

此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ,如果超过了,则把第一个缓存组件删掉

解决方案可以有以下两种:

每次组件渲染的时候,都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候,都会执行 actived 钩子

注意:服务器端渲染期间 avtived 不被调用

添加了vue.config.js还是无法解决缓存问题

题主是否想询问“添加了vue.config.js还是无法解决缓存问题怎么办”?
1、检查配置是否正确:请检查vue.config.js文件中的配置是否正确,如是否正确设置了outputDir、assetsDir、filenameHashing等选项。还需要检查webpack配置是否正确导出了配置对象。
2、检查缓存是否生效:可以在浏览器中查看请求的头部信息,检查是否正确设置了缓存控制头部,如Cache-Control、Expires等。若没有设置缓存控制头部,需要在vue.config.js中添加相应的配置。
3、强制刷新缓存:若仍然无法解决缓存问题,可以尝试在浏览器中强制刷新缓存,或者在url中添加时间戳等随机参数,以避免缓存。
4、使用第三方库:可以考虑使用第三方库来解决缓存问题,如cache-loader、hard-source-webpack-plugin等。这些库可以在webpack构建时缓存模块,以提高构建速度和性能。

添加了vue.config.js还是无法解决缓存问题

题主是否想询问“添加了vue.config.js还是无法解决缓存问题怎么办”?
1、检查配置是否正确:请检查vue.config.js文件中的配置是否正确,如是否正确设置了outputDir、assetsDir、filenameHashing等选项。还需要检查webpack配置是否正确导出了配置对象。
2、检查缓存是否生效:可以在浏览器中查看请求的头部信息,检查是否正确设置了缓存控制头部,如Cache-Control、Expires等。若没有设置缓存控制头部,需要在vue.config.js中添加相应的配置。
3、强制刷新缓存:若仍然无法解决缓存问题,可以尝试在浏览器中强制刷新缓存,或者在url中添加时间戳等随机参数,以避免缓存。
4、使用第三方库:可以考虑使用第三方库来解决缓存问题,如cache-loader、hard-source-webpack-plugin等。这些库可以在webpack构建时缓存模块,以提高构建速度和性能。

vue页面缓存(keepAlive)

同人博客搬迁~~~~(播客主页: https://www.cnblogs.com/epines/ )

页面缓存在页面中长期会使用到,可以更快速的在页面切换期间的资源获取

主要是用keep-alive实现

在vue项目中,相关的写法比较多,还有一些注意点需要仔细

第一种方式

在App.vue中

添加标签

  <keep-alive>

      <router-view />

  </keep-alive>

 这会就是所有的页面都会被缓存

这里做了两个页面的相互跳转,分别写了一个输入框,在输入内容后,跳转时,输入的内容因为缓存的原因会被保留

 如果存在某些页面需要缓存,那么可以通过keep-alive的属性去处理

其中就是include和exclude

  include:名称匹配的组件才会被缓存,其中可以写字符串或正则表达式

  exclude:名称匹配的组件不会被缓存,其中同样是字符串或正则表达式

这里的名称是指组件的名称

<script>

export default {

  name: 'HelloWorld'

}

</script>

     第二种方式:

     在路由中进行设置通过添加meta,route/index.js     

export default new Router({

  routes: [{

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld,

      meta: {

        keepAlive: true // 该路由会被缓存

      }

    },

    {

      path: '/ss',

      name: 'ss',

      component: Ss,

meta: {        keepAlive:false // 该路由不会被缓存,不需要缓存的时候该属性可以不用写      }

}]

})

这时候页面还需要通过该属性进行判断是否缓存

在App.vue  

  <keep-alive>

      <router-view v-if="$route.meta.keepAlive">

      </router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">

    </router-view>

  这样写有个优点就是,需要缓存不需要缓存的name可以随便写,不需要做什么规律性的去写出一个合适的正则去匹配上,就会更加灵活些

 常见的应用场景可以是,列表到详情页,从详情页返回到列表页,如果说列表页没有做缓存,在单页面下,会直接返回列表首页(存在分页的情况),就不能直接返回至之前离开的列表页,所以这个地方在列表页添加页面缓存后,可以做到返回至之前离开的列表页

 没有缓存的时候,返回列表:

 有缓存的时候,返回列表

所以从某些程度上来讲,即增加了页面的响应速度,又增加了用户体验,总体来说,还是比较实用的

vue页面缓存(keepAlive)

同人博客搬迁~~~~(播客主页: https://www.cnblogs.com/epines/ )

页面缓存在页面中长期会使用到,可以更快速的在页面切换期间的资源获取

主要是用keep-alive实现

在vue项目中,相关的写法比较多,还有一些注意点需要仔细

第一种方式

在App.vue中

添加标签

  <keep-alive>

      <router-view />

  </keep-alive>

 这会就是所有的页面都会被缓存

这里做了两个页面的相互跳转,分别写了一个输入框,在输入内容后,跳转时,输入的内容因为缓存的原因会被保留

 如果存在某些页面需要缓存,那么可以通过keep-alive的属性去处理

其中就是include和exclude

  include:名称匹配的组件才会被缓存,其中可以写字符串或正则表达式

  exclude:名称匹配的组件不会被缓存,其中同样是字符串或正则表达式

这里的名称是指组件的名称

<script>

export default {

  name: 'HelloWorld'

}

</script>

     第二种方式:

     在路由中进行设置通过添加meta,route/index.js     

export default new Router({

  routes: [{

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld,

      meta: {

        keepAlive: true // 该路由会被缓存

      }

    },

    {

      path: '/ss',

      name: 'ss',

      component: Ss,

meta: {        keepAlive:false // 该路由不会被缓存,不需要缓存的时候该属性可以不用写      }

}]

})

这时候页面还需要通过该属性进行判断是否缓存

在App.vue  

  <keep-alive>

      <router-view v-if="$route.meta.keepAlive">

      </router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">

    </router-view>

  这样写有个优点就是,需要缓存不需要缓存的name可以随便写,不需要做什么规律性的去写出一个合适的正则去匹配上,就会更加灵活些

 常见的应用场景可以是,列表到详情页,从详情页返回到列表页,如果说列表页没有做缓存,在单页面下,会直接返回列表首页(存在分页的情况),就不能直接返回至之前离开的列表页,所以这个地方在列表页添加页面缓存后,可以做到返回至之前离开的列表页

 没有缓存的时候,返回列表:

 有缓存的时候,返回列表

所以从某些程度上来讲,即增加了页面的响应速度,又增加了用户体验,总体来说,还是比较实用的

Vue组件传值及页面缓存问题

关于父组件的传值类型和props更多的定义详见官网 : vue官网

(2)子组件向父组件传值

(3)通过 chlidren等方法调取用层级关系的组件内的数据和方法。

有很多时候根据业务需求要在同级组件或页面间传值,此处提供以下几种方法作为参考:

(1)通过router-link进行跳转

(2) this.$router.push()

此方法同样是有path+query和name+params两种方式:

总结:使用query,传输的值会在url后面以参数的形式显示出来,可以刷新页面,数据不变,但会是页面路由过长;而params只要一刷新传递的参数就没了。

(3)LocalStorage缓存传值

注意:简单的小项目可以这么做,如果项目很大,建议直接用vuex。

(4)通过Vuex进行传值

(5)发布订阅模式(也叫eventBus或事件总线)

在Vue的原型上定义一个变量eventBus,所有所有Vue的实例或组件都将共享这个eventBus,可以用eventBus来发布自定义事件,然后在组件中用eventBus订阅自定义事件。就可以实现传值。

详细讲解可看 链接

(6)Vue.observable

index.vue组件中触发:

Vue中如何在切换组件过程中,将状态保存到内存中,防止DOM重新渲染,通俗的讲就是实现如何在一个页面输入部分数据后到了另一个页面再返回该页面,数据还在。

需求分析:Page1中录入信息,页面跳转带Page2,然后再返回Page1,之前Page1录入的信息还存在。

现在更改需求为:

首页是A页面

A页面跳转到B,B页面不需要缓存

B页面跳转到C,C页面不需要被缓存

C页面返回到B,B页面需要缓存

B页面返回到A,

A再次跳转到B

(1)此时思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive

beforeRouteLeave讲解

PageA页面:

PageB页面:

(2)用eventBus解决此问题

需要注意的一点是发布订阅第一次会无效,因为订阅的组件还没创建。解决方法就是首次进入pageB页面时接收pageA页面params里传递的参数。

在Vue中,怎样实现持久化存储数据?

在开发过程中,大家可能会有一个困惑,在使用vuex的时候,每当浏览器刷新页面的时候,数据都会消失,还要重新去请求,那我们怎样去持久化存储我们所需要重复用到的数据呢?

举个栗子,假设有这样的情景,有一个登录界面,我们需要点击登录之后存储用户名和密码,该用户的用户名和密码在以后的操作中都需要用到,

比如:

1、在显示用户信息的时候需要用到用户名

2、在修改密码的时候,我们需要比对密码是否正确需要用到密码

那下面就介绍一个使用的方法:

借助于 vuex-persist 插件

使用 npm install vuex-persist -D 安装依赖

我们可以通过 commit 提交并写入我们需要持久化存储数据

在 login.vue 中

这个是我的 vuex 存储的目录结构

在 index.js 中

在 user.js 中

站点网还为您提供以下相关内容希望对您有帮助:

VUE vue-cli3配置打包后的文件加上版本号

// 给js和css配置版本号             config.output.filename('js/[name].' + Timestamp + '.js').end();...

Vue组件传值及页面缓存问题

(1)通过router-link进行跳转 (2) this.$router.push()此方法同样是有path+query和name+params两种方式:总结:使用query,传输的值会在url后面以参数的形式显示出来,可以刷新页面,数据不变,但会是页面路由过长;而pa...

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的理解是...

首先获取组件的 key 值:拿到 key 值后去 this.cache 对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:直接从缓存中拿 vnode 的组件实例,此时重新调整该组件 key 的顺序,将其从原来的地方删掉...

vue页面缓存,keep-alive第一次无效的解决方法

方法二:使用 include + beforeRouteLeave + vuex 与方法一相似,不同的地方在于,将需要缓存的组件保存到全局变量,可以在路由的钩子函数里灵活的控制哪些组件需要缓存,那些不需要缓存;跟方法一相比,不需要每次再重新初始化...

添加了vue.config.js还是无法解决缓存问题

3、强制刷新缓存:若仍然无法解决缓存问题,可以尝试在浏览器中强制刷新缓存,或者在url中添加时间戳等随机参数,以避免缓存。4、使用第三方库:可以考虑使用第三方库来解决缓存问题,如cache-loader、hard-source-webpack-...

vue页面缓存(keepAlive)

第一种方式 在App.vue中 添加标签   &lt;keep-alive&gt;       &lt;router-view /&gt;   &lt;/keep-alive&gt; 这会就是所有的页面都会被缓存 这里做了两个页面的相互跳转,分别写了一个输入框,在...

【解决彻底】vue前端发版后要刷新才能看到更新问题

vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。关键在于index.html文件它会被浏览器缓存。浏览器访问的还是旧的静态资源。解决办法如下,在meta标签禁止...

vue3使用 keep-alive对iframe进行缓存

deactivated :在页面结束时触发该方法,可清除掉滚动方法等缓存。iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来...

Vue性能优化方法

对于无限长列表来说,性能优化主要方法是保持仅渲染可视化部分。来看一下下面这个例子:这是最常见的写法,不过如果列表的内容很多,你就会发现页面十分的卡顿。此时大家可以利用 vue-virtual-scroller 这个组件,进行优化:这样,...

plm系统是什么意思啊

海峰思普采用的是架构企业级的文档浏览环境,服务器版AutoVue,客户端端无需安装。浏览操作是在服务器,本地只是显示。而不同于一般的PLM浏览是将文件下载到本地或者缓存,用本地浏览器插件浏览。无需担心数据截取泄密。在这个环境中,您...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top