项目优化-CSDN博客

本文链接：https://blog.csdn.net/haruhyuhae/article/details/108785143

本文探讨了如何优化网页性能，通过实施图片懒加载减少初始加载负担，只在图片进入视口时加载。同时介绍了UI框架按需加载，确保仅在使用时引入组件。此外，还详细讲解了路由懒加载，通过分组加载路由来避免文件过大，以及如何配置@babel/plugin-syntax-dynamic-import实现这一目标。这些策略能显著提升Web应用的加载速度和用户体验。

摘要由CSDN通过智能技术生成

图片

在网页中，往往存在大量的图片资源，这些资源或大或小。
当我们页面中DOM中存在大量的图片时，难免不会碰到一些加载缓慢的问题，导致图片出现加载失败的问题。

网络上大部分都在使用懒加载的使用方式，只有当存在图片的DOM 出现在页面上才会进行图片的加载，无形中起到了分流的作用

UI框架使用方式

确保在使用UI框架，如， Element UI框架的时候，都使用官方给暴露出来的按需加载组件。只有真正用到它的时候时候才会加载当前UI框架的组件，而不是一开始就将整个组件库给加载出来

import { Button } from 'element-ui'

路由懒加载

当项目过大时，路由文件会随之变大，为了避免文件过大，设置路由懒加载，通过分组的形式加载整组路由，而不是单独加载。
1、安装@babel/plugin-syntax-dynamic-import 包。在vue ui可视化中加载开发依赖中搜索
2、在babel.config.js配置文件中申明该插件。在plugins中申明插件
在这里插入图片描述
3、将路由改为按需加载的形式

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    redirect:'/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/home', 
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/user', 
        name: 'userlist',
        component: () => import('../views/user/userlist'),
      },
      {
        path: '/authority', 
        name: 'Authority',
        component: () => import('../views/Authority/Authority'),
      },
      {
        path: '/role', 
        name: 'Role',
        component: () => import('../views/Authority/Role'),
      }
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router