Vue加载速度优化,verder.js和element.js加载速度慢解决方法

1. 使用CDN

这里把常用的vue、vuex、elementui、echarts、axios都引入成cdn的方式

1、在index.html引入CDN

找到public/index.html在上方引入下边的cdn。

!NOTE

引入script的时候,一定要把vue.js放到最上边,最先引入,不然后边的js加载会有问题

html 复制代码
  <!-- 引入样式 -->
  <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.7.14/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.15.14/index.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.6.5/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/1.11.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/6.0.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/6.7.3/index.esm.min.js"></script>

2、批量注释掉引用

main.js项目主js或者ts中去除对element 、vue、vuex、echarts、axios的引用

全局搜索

复制代码
// import Vue from 'vue'
// import Vuex from 'vuex'
// import ElementUI from 'element-ui'
// import 'echarts'
// import request from 'axios'
// import { MessageBox } from 'element-ui'
// import { Loading, Message, MessageBox, Notification } from 'element-ui'

把这些直接引用的地方都注释掉

3、main.js(指定文件排查)

在mian.js中注释掉 element 、vue、vuex、echarts、axios的引用

其中**Vue.use(Elment)**要注释掉。不然启动会报错

4、router/index.js(指定文件排查)

注释掉

js 复制代码
// import Vue from 'vue'
// import VueRouter from 'vue-router'

保留

js 复制代码
Vue.use(VueRouter)

!NOTE

这里要注意一下,Vue.use(VueRouter)中的VueRouter不能改为其他字段,否则会报错

5、store/index.js(指定文件排查)

注释掉

js 复制代码
// import Vue from 'vue'
// import Vuex from 'vuex'

保留

js 复制代码
Vue.use(Vuex)

6、webpack出去除依赖

在webpack的配置文件中去除对vue、vuex、axios、echarts、element等的依赖。

查看主目录的vue.config.js或者webpack.config.js之类的打包配置文件

也可以搜索module.exports = {此文件中就可以加上配置,去除以来

js 复制代码
module.exports = {
  // 引入外部库, 无需webpack打包处理
  externals: {
    'vue' : 'Vue',
    'vue-router':'VueRouter',
    'vuex':'Vuex',
    'axios':'axios',
    'element-ui':'ElementUI',
    'mockjs': 'Mock',
    'echarts': 'echarts',
    'ueditor': 'UE'
  }
}

2. 路由懒加载

router/index.js

路由使用懒加载模式

js 复制代码
// import Vue from 'vue'
// import VueRouter from 'vue-router'
import Layout from '@/layouts'
import { publicPath, routerMode } from '@/config'

Vue.use(VueRouter)
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
  },
  {
    path: '/register',
    component: () => import('@/views/register/index'),
    hidden: true,
  },
  {
    path: '/401',
    name: '401',
    component: () => import('@/views/401'),
    hidden: true,
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404'),
    hidden: true,
  },
]
// 路由懒加载
const device = ()=> import("@/views/device/index")
const deviceVersion = ()=> import("@/views/deviceVersion/index")
const mqttUser = ()=> import("@/views/mqttUser/index")
const role = ()=> import("@/views/personnelManagement/roleManagement/index")
const user = ()=> import("@/views/personnelManagement/userManagement/index")
export const asyncRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'Index',
        component: () => import('@/views/index/index'),
        meta: {
          title: '首页',
          icon: 'home',
          affix: true,
        },
      },
    ],
  },
  {
    path: "/device",
    component: Layout,
    redirect: "noRedirect",
    children: [
      {
        path: "index",
        name: "Index",
        component: device,
        meta: {
          title: "设备管理",
          icon: "vector-square",
          permissions: ["admin"],
        },
      },
    ],
  },
  {
    path: "/deviceVersion",
    component: Layout,
    redirect: "noRedirect",
    children: [
      {
        path: "index",
        name: "Index",
        component: deviceVersion,
        meta: {
          title: "设备版本",
          icon: "cloud-upload-alt",
          permissions: ["admin"],
        },
      },
    ],
  },
  {
    path: "/mqttUser",
    component: Layout,
    redirect: "noRedirect",
    children: [
      {
        path: "index",
        name: "Index",
        component: mqttUser,
        meta: {
          title: "设备接入",
          icon: "cube",
          permissions: ["admin"],
        },
      },
    ],
  },
  {
    path: "/role",
    component: Layout,
    redirect: "noRedirect",
    children: [
      {
        path: "index",
        name: "Index",
        component: role,
        meta: {
          title: "角色管理",
          icon: "diagnoses",
          permissions: ["admin"],
        },
      },
    ],
  },
  {
    path: "/user",
    component: Layout,
    redirect: "noRedirect",
    children: [
      {
        path: "index",
        name: "Index",
        component: user,
        meta: {
          title: "用户管理",
          icon: "user-friends",
          permissions: ["admin"],
        },
      },
    ],
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true,
  },
]

const router = new VueRouter({
  base: publicPath,
  mode: routerMode,
  scrollBehavior: () => ({
    y: 0,
  }),
  routes: constantRoutes,
})

export function resetRouter() {
  location.reload()
}

export default router

3. Nginx开启Gzip压缩

httpserver 模块中添加配置

复制代码
server {
    # 其他配置...
 
    gzip on; # 开启gzip压缩
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/png image/gif image/jpeg; # 设置需要压缩的文件类型
    gzip_comp_level 6; # 设置gzip的压缩级别,1-9,9最压缩,但最耗时
    gzip_buffers 16 8k; # 设置系统获取几个单server存储gzip的压缩结果数据流。
    gzip_http_version 1.1; # 设置识别HTTP协议版本,默认1.1
    gzip_vary on; # 此指令可以让前端的缓存服务器缓存在不同的压缩方式上。
    # gzip_proxied any; # 对于后端服务器返回的数据进行压缩,默认不对数据进行压缩。
}

重启nginx使配置生效

shell 复制代码
/usr/local/nginx/sbin/nginx -s reload
相关推荐
周小码10 小时前
Payload框架:Next.js全栈开发的即时TypeScript后端与管理面板
开发语言·javascript·typescript
刺客-Andy10 小时前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
南北是北北10 小时前
为什么“以音频为主时钟”最稳,怎么做 A/V 同步
前端·面试
leon_teacher10 小时前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
小奋斗10 小时前
深入浅出:模板引擎详解
javascript·面试
LHX sir10 小时前
巨头撤退,玩家内卷!2025,IoT平台的生死劫与重生路
开发语言·前端·物联网·低代码·ui·前端框架·交互
龙在天10 小时前
Tailwind 类名 记个规律大概,然后去文档查
前端
Undoom10 小时前
当Python遇见高德:基于PyQt与JS API构建桌面三维地形图应用实战
javascript·后端
东北南西10 小时前
实现 TypeScript 内置工具类型(源码解析与实现)
前端·typescript