本文目录一览：
vue长列表性能优化
一、原因
当页面dom元素太多时浏览器渲染速度就会变慢，当浏览器内存不足时甚至会导致浏览器卡顿或者卡死等现象。因此对症下药，解决方案就是减少页面dom的渲染。
二、原理
可以通过按需进行加载dom，即只显示可视化区域的数量。从而减少dom的结构，实现性能提升。因此，分页加载、懒加载等方案根本治标不治本。
三、实现
此文章基于 vue-virtual-scroll-list 第三方插件，通过虚拟列表进行滚动加载数据。
2个关键的参数，分别是size和keeps。size属性指每一行高度，默认50px，keeps属性指每一行显示个数， 默认30个。
四、效果
vue 页面多模块，优化加载速度
import Vue from'vue'；
import Router from'vue-router' ；
import HelloWorld from'@/components/HelloWorld' ；
Vue.use(Router)；
export defaultnew Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
import Vue from 'vue'
import Router from 'vue-router'/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)
export defaultnew Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=(require(["@/components/HelloWorld"],resolve))
}
]
})
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=import("@/components/HelloWorld")
export defaultnew Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
原始写法：
One-com/One-com 1111
One-com/One-com 1111
One-com/One-com 1111
One-com/One-com 1111
One-com/One-com 1111
One-com/One-com 1111
template
div class="hello"
One-com/One-com
1111
/div
/template
script
import One from './one'
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
/script
const 写法
template
div class="hello"
One-com/One-com
1111
/div
/template
script
const One = ()=import("./one");
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
/script
异步写法：
template
div class="hello"
One-com/One-com
1111
/div
/template
script
export default {
components:{
"One-com":resolve=(['./one'],resolve)
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
/script
One-com/One-com 1111
总结：
路由和组件的常用两种懒加载方式
1.vue异步组件实现路由懒加载
component: resolve=(['地址'], resolve)
2.es提出的import（推荐使用）
const HelloWorld = () = import('地址')
Vue单页面如何做seo页面优化
1、服务端渲染
服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。
2、预渲染方式
在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。
vue 打包文件体积过大优化
因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。
一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
二、接下来要去修改vue的配置文件 vue.config.js
三 打包后对比