当前位置：首页 > web >正文

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

web 2025/9/4 7:28:28

1. 使用CDN

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

1、在index.html引入CDN

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

[!NOTE]

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

  <!-- 引入样式 --><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（指定文件排查）

注释掉

// import Vue from 'vue'
// import VueRouter from 'vue-router'

保留

Vue.use(VueRouter)

[!NOTE]

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

5、store/index.js（指定文件排查）

注释掉

// import Vue from 'vue'
// import Vuex from 'vuex'

保留

Vue.use(Vuex)

6、webpack出去除依赖

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

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

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

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中

路由使用懒加载模式

// 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压缩

在 http 或 server 模块中添加配置

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.1gzip_vary on; # 此指令可以让前端的缓存服务器缓存在不同的压缩方式上。# gzip_proxied any; # 对于后端服务器返回的数据进行压缩，默认不对数据进行压缩。
}

重启nginx使配置生效