vue 打包文件体积过大优化

因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。

一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。

二、接下来要去修改vue的配置文件 vue.config.js

三 打包后对比

vue长列表性能优化

一、原因

当页面dom元素太多时浏览器渲染速度就会变慢，当浏览器内存不足时甚至会导致浏览器卡顿或者卡死等现象。因此对症下药，解决方案就是减少页面dom的渲染。

二、原理

可以通过按需进行加载dom，即只显示可视化区域的数量。从而减少dom的结构，实现性能提升。因此，分页加载、懒加载等方案根本治标不治本。

三、实现

此文章基于 vue-virtual-scroll-list 第三方插件，通过虚拟列表进行滚动加载数据。

2个关键的参数，分别是size和keeps。size属性指每一行高度，默认50px，keeps属性指每一行显示个数， 默认30个。

四、效果

Vue单页面如何做seo页面优化

1、服务端渲染

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

2、预渲染方式

在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

使用vue后怎么针对搜索引擎做SEO优化?

适用于vue的SEO优化方案，以下几种：

（1）ssr,即单页面后台渲染

（2）vue-meta-info 与prerender-spa-plugin 预渲染

（3）nuxt

（4）phantomjs

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

v-if 有更高的切换开销。 v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

Vue 2.6 加了新的插槽写法: v-slot 。如下:

了解更多插槽新写法的内容，见 Vue 2.6 发布了 。

vue项目首屏加载优化

前端方面可以使用的操作：

1.尽量使用线上资源，本地的图片尽量上传

2.首屏的轮播图尽量不要采用线上图片，加载慢时会产生图片一块一块加载的问题，可以把本地图片转成base64来解决这个问题。注：本地图片不要过大，否则也会拖慢加载速度

3.对UI组件库使用按需引入

4.使用压缩传输compression-webpack-plugin，这个需要后端配合开启

5.删除map文件，在vue.config.js中把productionSourceMap设置为false即可