本文作者:qiaoqingyi

vue优化性能的方法(vue前端优化性能的方法)

qiaoqingyi 2023-08-20 136

这次给大家带来vue+resolve如何优化,vue+resolve优化的注意事项有哪些,下面就是实战案例,一起来看一下通过vuecli来创建vue+webpack的项目时,已经有很多都配置好了,但是路径方面为了方便开发,还可以优化1 resolve。

1Vue的data属性 2Vuex的state对象的属性顺便说一下,当你需要修改这个数据,你可以通过创建一个新的对象数组 当你需要增加一个对象,可以参考下面这个例子想了解具体提升了多少 性能 吗欲知后事如何,请看下篇。

下面是代码的具体实现1首先是引入资源,这里用的是bootstrap提供的资源, 你可以登录官网进入查看哦,网址 vue在最外层的indexjs文件中引入,引入如下然后项目中需要改的地方是bulid文件夹。

vue优化性能的方法(vue前端优化性能的方法)

建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小webpack开启gzip压缩若首屏为登录页,可以做成多入口,登录页单独分离为一个入口使用CDN资源,减小服务器带宽压力在indexhtml中引入cdn资源 lt! bui。

exclude 字符串或正则表达式任何匹配的组件都不会被缓存通过vue提供的keepalive减少对服务器的请求次数 VUE20中提供了一个keepalive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗比如, 一个页面。

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

阅读
分享