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

图片优化1图片大小优化，部分图片使用WebP需要考虑webp兼容性 在线生成，如智图又拍云 gulp生成，gulpwebp或gulpimageisux canvas生成2减少图片请求，使用雪碧图 在线生成sprites Generator腾讯的gopngspriteme。

Vue 类的项目开发中项目结构基本都是类似于 Vuecli 生成的方式，这种方式开发中，最常用到的模式是开启代理进行 mock 调试或远程调试，也就是使用了 Vuecli 设置的配置 proxyTable 或者直接使用 Webpackdevserver提供的 proxy 选项。

二原理 可以通过按需进行加载dom，即只显示可视化区域的数量从而减少dom的结构，实现性能提升因此，分页加载懒加载等方案根本治标不治本三实现 此文章基于 vuevirtualscrolllist 第三方插件，通过虚拟列表。

SSR优化 当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染编译前 编译后 源码体积有优化 与Vue2相比较，Vue3。

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

默认情况下，import导入的第三方依赖会被打包进同一个文件，造成文件体积过大进而影响加载速度通过配置 externals 结点将需要全局导入的第三方依赖排除在打包文件外，可以有效减少打包体积 声明方式为 依赖包名。

以下给出在下知道的几种优化方案使用CDN资源，减小服务器带宽压力路由懒加载将一些静态js css放到其他地方如OSS，减小服务器压力按需加载三方资源，如iview，建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小。

1服务端渲染 服务端渲染对于刚接触vue的新手来说，并不是那么友好，虽然已有官方SSR中文文档但是对于一个已经开发完毕的vue项目去接SSR无论是从工作量还是技术角度来说，都是一种挑战2预渲染方式 在构建时build。

这次给大家带来Vue怎么使用CDN优化首屏加载的速度，Vue使用CDN优化首屏加载速度的注意事项有哪些，下面就是实战案例，一起来看一下前言作为一个网站应用，加载速度是非常重要的加载速度，一个是程序的合理安排，如以组件。

有以下的原因和解决方法1菜单数据量过大如果菜单数据量较大，那么每次重新渲染都会造成一定的性能压力此时可以考虑对菜单进行分页或者虚拟滚动等优化处理，以避免不必要的性能损耗2computed属性计算复杂如果您在。

所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法 这里用到的就是vue的组件懒加载在routerjs中，不要使用import的方法引入组件，使用requireensureimport index from #39@componentsindex#39const。

框架代码如果你的代码依赖了一些框架，比如elementplus，那么更新速度就会受到框架代码的影响建议尽可能避免依赖过多的框架或者使用压缩版的框架代码针对优化方式，可以尝试以下几种方式减少不必要的依赖，简化代码结构。

3运行npm run dll就可以生成vendormanifestjson和 4然后在indexhtml中引入 然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快 优化前 优化后 大概平均可以节省三。

每当发生变化的时候重新获取一次筛选后的列表这个场景很常见，有没有办法优化一下呢招式解析首先，在watchers中，可以直接使用函数的字面量名称其次，声明immediatetrue表示创建组件时立马执行一次watch searchInput。

需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时简单的说就是进入首页不用一次加载过多资源造成用时过长懒加载的方式import Vue from #39vue#39import Router from #39vuerouter#39。