vue优化方案（如何优化vue项目）

今天给各位分享vue优化方案的知识，其中也会对如何优化vue项目进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue 打包文件体积过大优化
• 2、vue长列表性能优化
• 3、使用vue后怎么针对搜索引擎做SEO优化?
• 4、vue打包优化——vendor体积过大
• 5、vue性能优化之build后包体积太大

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优化?

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

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

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

（3）nuxt

（4）phantomjs

vue打包优化——vendor体积过大

在vue.config.js文件中的chainWebpack配置插件，默认会在8888端口打开

根据之前打包分析图来看，主要是locale下moment的其他语言包占用体积较大。默认是en的语言包，所以在无需其他语言的情况下，可以直接忽略掉locale下的文件不打包。

解决方案：用webpack自带的IgnorePlugin插件

vue.config.js文件

将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

cdn引入的地址可以参考官网

也可以像这篇文章是直接在vue.config.js中配置cdn的url地址 vue-cli3打包项目引入外部CDN资源文件

moment的其他语言包没有被打包了，vue等文件也都用的cdn文件，没有被打包进去vendor。

vue性能优化之build后包体积太大

基于vue-cli3.0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。----毫无体验感！！！

实践的项目喜欢捣鼓可以clone下来

项目地址: vue-fiction

只总结了亲测效果明显的几种方案，解决方案大多来自于日常总结及各路大佬，如有不足，请大佬补充~

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。

vue优化方案的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于如何优化vue项目、vue优化方案的信息别忘了在本站进行查找喔。