vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue verder.js和element.js加载速度慢

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

作者：RedEric

文章指导如何通过CDN引入Vue等库,调整引入顺序并移除main.js中的相关依赖；实现路由懒加载；配置Nginx开启Gzip压缩,提升性能与加载效率

一、使用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="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>

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

二、路由懒加载

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

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

重启nginx使配置生效

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文