vue项目优化

最新推荐文章于 2024-05-16 10:51:18 发布
最新推荐文章于 2024-05-16 10:51:18 发布
阅读量339 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42451776/article/details/118388755
版权

文章目录

首屏优化

cdn加速

对静态资源进行加速(就是利用你最近的服务器来发送)

字体图标

精灵图

小图片合并为精灵图

图片懒加载

1. 安装

yarn add  vue-lazyload -D --save

2. main.js中引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
    error:'@/assets/img/logo.png',//图片加载失败时候显示的图片
    loading:'@/assets/img/loading.gif'//图片还未加载完成时候的loading图片
})

3. 使用

<img  v-lazy="item.image" alt="img">

请求太多

请求合并

promise.all

利用nginx做静态资源的合并

可以将多个js,css文件合并成一个

首页加载的资源过大

css,js

混淆加密(变量)和压缩

img

压缩
base64(减少请求,只对小图转64)
webp格式(更小，更快)
开启gzip全压缩

按需加载

plugins

异步加载路由(分包)

 {
    path: '/Category',
    name: 'Category',
    meta: {
      isAuthToken: true,
      keepAlive: false,
      title: "分类"
    },
    component: () => import('views/Category/index.vue')
  }

组件懒加载

vue2

const Nav=()=>import("components/common/Nav/index.vue")  // vue3没有正常加载

vue3

componet_async

删除注释和控制台输出，代码压缩

Object.freeze()

冻结不需要修改的对象，不会进行 响应式转换

骨架屏

示例

在public下的index.html中修改如下代码

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>盛龙学院</title>
  <style>
    html,
    body,


    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .demo-1 {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }


    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 1 */
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      /* COLOR 3 */
      -moz-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -webkit-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }

      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }

      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }


    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      /* Old browsers */
      z-index: 1000;
      -webkit-transform: translateX(0);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(0);
      /* IE 9 */
      transform: translateX(0);
      /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }

    /* Loaded */

    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(-100%);
      /* IE 9 */
      transform: translateX(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(100%);
      /* IE 9 */
      transform: translateX(100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateY(-100%);
      /* IE 9 */
      transform: translateY(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    /* JavaScript Turned Off */

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }

    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }

    
  </style>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载数据,请耐心等待
        <br>
        <span>V1.3</span>
      </div>
    </div>
  </div>
</body>

</html>

代码层面

  • 路由缓存
  • ajax缓存
  • 图片懒加载
  • 异步加载路由和组件
  • 防抖，节流
  • 按需加载组件
  • 冻结非必须的vue响应式数据
  • 在页面销毁时清除 watch
不忘初心1995
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue首页加载优化
zaoqinghuan的博客
12-27 410
vue项目将打包代码部署上线后访问项目,会发现页面会出现长时间的空白等待。这个严重影响了用户的体验。可以通过下面方法优化。 一、引入cdn。链接https://www.bootcdn.cn/ 造成加载时间过慢的元凶是vendor文件，该文件存放的是项目中所有的第三方依赖。比如vuex、vue-router、jquery等。优化的一个要点就是分离第三方依赖。但是分离的时候要考虑到，即便将依赖分离后依...
Vue的首页优化
MH.的博客
10-13 1977
我做首页优化本来是为了解决vue的首页白屏问题的，但是把资源从1.1m优化到了270kb还有会出现白屏的问题，效果没有预期的好，因为白屏不只和资源大小有关。搜了一下说解决首页白屏还是SSR服务端渲染效果好。 资源大小是减小的很明显的，我就通过这篇文章来分享且记录一下，有说的不对的还请大家留言告诉我，谢谢~ 先放一张没有做优化的资源大小的图片: 可以注意一下此时资源的大小和数量，后面我们会有明显的...
vue 首页加载，速度优化及解决首页白屏问题_vue进入加载的首页(1)
2401_84419493的博客
05-16 504
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件3、vue-router路由懒加载4、静态资源压缩，代码压缩，图片压缩。
Vue 网站首页加载优化
qq_34285557的博客
10-10 762
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用， 其他就是对接口优化等  1. vendor.js 优化  由于Vue项目随着功能变多 依赖也会随之变多，减少vendor.js的主要方法就是将其 不打包依赖！！   1.1 第一步、cdn引入各种包   index.html中cdn的方式引入vue、vuex、axios、iview
vue项目首页优化问题（前后端都要优化）
田兴的博客
10-15 1865
本篇主要讲解 Vue项目打包后 dist >>js>>vendor.js文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用 1. vendor.js 优化(减少体积) 由于Vue项目随着功能变多 依赖也会随之变多，减少vendor.js的主要方法就是将其 不打包依赖！！ 1.1 第一步、cdn引入各种包 index.html中cdn的方式引入vue、vuex、axios、vant-ui、element-ui、等包，如下图： 1.2 第二步、在
vue项目首页加载优化
sq-web
09-21 1362
vue 应用中，首页加载资源过多，导致加载缓慢的问题
浅谈 Vue 项目优化的方法
08-28
浅谈 Vue 项目优化的方法 本文旨在介绍 Vue 项目优化的方法，涵盖基础优化、模板优化、样式优化和脚本优化等方面的知识点。 基础优化是任何 Web 项目都需要做的，是问题的根源。我们需要关心 HTML、CSS、JS 三个...
如何应对vue项目优化的需求，掌握这“神器”就够了
01-08
该文章是博主针对之前做的一个vue移动端项目进行优化之后的总结，项目用的是vue-cli3 + spa。本文章针对的是简单的首屏加载优化，该文章还有后续版本。 分析 vue-cli 3.x自带了分析工具，直接运行vue-cli-service ...
Vue项目的优化资源整理
12-20
Vue 项目优化主要关注代码效率、用户体验和资源加载速度。以下是一些关键的优化策略： 1. **使用 `keep-alive` 缓存组件** `keep-alive` 是 Vue 中用于缓存组件实例的一个抽象组件，它可以避免组件在切换时进行...
Vue如何优化首页加载
weixin_38655844的博客
12-14 1138
首页白屏原因 主要原因是单页应用,加载资源过慢,需要将所有需要的资源都下载到浏览器端并解析。单页面应用的html是靠js生成,因为首屏需要加载很大的js文件(app.ja vendor.js),所以当网速差的时候会产生定程度的白屏。 首屏优化方法 1,在路由返回内容前添加loading(骨架屏) vue-server-renderer yue-skeleton-webpack-plugin page-skeleton-webpack-plugin 2,使用首屏SSR +跳转SPA方式来优化 3,改单页应
Vue首页加载速度优化
热门推荐
haojie6091的博客
08-14 1万+
Vue首页加载速度优化 问题描述 最近在搭建自己的博客，前端采用Vue技术，发现首页加载速度非常之慢，常常达到10S左右。虽然作为一个Java开发者，对前端技术不是特别了解，但是也实在无法忍受如此之慢的打开网页速度，遂开始优化之旅。 寻找原因 游览器的分析结果：vendor.xxxxx.js体积过于庞大，此文件为第三方插件库。 查找打包数据，发现该文件在打包时变提示体积过大【big】 ...
详解vue项目首页加载速度优化
08-29
主要介绍了详解vue项目首页加载速度优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈vue首屏加载优化
08-27
主要介绍了浅谈vue首屏加载优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue首页白屏的原因及如何优化
Delicia_Lani的博客
10-09 4544
一、原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏 二、解决办法： （1）优化 webpack 减少模块打包体积，code-split 按需加载 （2）服务端渲染，在服务端事先拼装好首页所需的 html （3）首页加 loading 或 骨架屏 （仅仅是优化体验） （4）缓存一...
vue首屏优化方案
weixin_52607811的博客
11-26 1536
① 性能测试工具： Pingdom Website Speed Test | Pingdom Tools ②安装webpack-bundle-analyzer安装命令npm i webpack-bundle-analyzer -D 然后在webpack的dev开发模式配置中，引入插件，代码如下： const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') plugins: [ new BundleAnalyzer...
vue如何优化首页加载速度？
m0_74265396的博客
01-05 664
图片优化：对首页中的图片进行优化，可以使用图片压缩工具来减小图片文件的大小，同时使用合适的图片格式（如WebP）来提高加载速度。总之，优化Vue首页的加载速度需要从各个方面综合考虑，包括代码优化、资源优化、网络请求优化等，根据具体情况选择合适的优化策略。优化网络请求：对于一些比较耗时的网络请求，可以进行优化，例如使用CDN来加速静态资源的加载，使用Gzip压缩传输内容等。缓存策略：使用合适的缓存策略，例如使用浏览器缓存、CDN缓存等，可以减少对服务器的请求，提高加载速度。
vue项目首屏加载优化
重楼的博客
10-15 5839
vue项目首屏加载优化1、存在的问题2、什么是首屏加载2.1 首屏加载时间的计算3、加载慢的原因4、解决的办法4.1 路由懒加载4.1.1 什么是路由懒加载？4.1.2 为什么需要懒加载呢？4.1.3 路由懒加载的原理4.1.4 如何实现路由懒加载？4.2 压缩图片4.3 gzip 压缩4.3.1 服务器压缩文件4.3.2 前端 webpack 打包生成 gz 文件4.4 Webpack打包体积优化4.4.1 splitChunks4.4.2 splitChunks优化5、时间轴回放 最近这几个月一直在开发
vue 首页加载，速度优化及解决首页白屏问题_vue进入加载的首页(4)
最新发布
2401_84419493的博客
05-16 321
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue项目优化面试题
04-12
在Vue项目优化面试题中，有几个常见的优化方案可以考虑： 1. 减少大数据获取和渲染：设计上避免一次性获取和渲染大量数据，可以采用分页加载或者懒加载的方式，只在需要时获取和渲染部分数据。 2. 虚拟表格优化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值