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

  <!-- 引入样式 -->
  <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="external nofollow"  rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.15.14/theme-chalk/index.css" rel="external nofollow"  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>

// 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'

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

Vue.use(VueRouter)

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

Vue.use(Vuex)

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

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

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; # 对于后端服务器返回的数据进行压缩，默认不对数据进行压缩。
}

/usr/local/nginx/sbin/nginx -s reload