Vue加載速度優(yōu)化,verder.js和element.js加載速度慢的解決方案
更新時間：2025年09月11日 08:42:27 作者：RedEric
文章指導(dǎo)如何通過CDN引入Vue等庫,調(diào)整引入順序并移除main.js中的相關(guān)依賴；實現(xiàn)路由懶加載；配置Nginx開啟Gzip壓縮,提升性能與加載效率
一、使用CDN
這里把常用的vue、vuex、elementui、echarts、axios都引入成cdn的方式
1、在index.html引入CDN
找到public/index.html在上方引入下邊的cdn。
[!NOTE]
引入script的時候，一定要把vue.js放到最上邊，最先引入，不然后邊的js加載會有問題
<!-- 引入樣式 --> <link rel="external nofollow" rel="stylesheet"> <link 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: "設(shè)備管理",
icon: "vector-square",
permissions: ["admin"],
},
},
],
},
{
path: "/deviceVersion",
component: Layout,
redirect: "noRedirect",
children: [
{
path: "index",
name: "Index",
component: deviceVersion,
meta: {
title: "設(shè)備版本",
icon: "cloud-upload-alt",
permissions: ["admin"],
},
},
],
},
{
path: "/mqttUser",
component: Layout,
redirect: "noRedirect",
children: [
{
path: "index",
name: "Index",
component: mqttUser,
meta: {
title: "設(shè)備接入",
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; # 設(shè)置需要壓縮的文件類型
gzip_comp_level 6; # 設(shè)置gzip的壓縮級別，1-9，9最壓縮，但最耗時
gzip_buffers 16 8k; # 設(shè)置系統(tǒng)獲取幾個單server存儲gzip的壓縮結(jié)果數(shù)據(jù)流。
gzip_http_version 1.1; # 設(shè)置識別HTTP協(xié)議版本，默認1.1
gzip_vary on; # 此指令可以讓前端的緩存服務(wù)器緩存在不同的壓縮方式上。
# gzip_proxied any; # 對于后端服務(wù)器返回的數(shù)據(jù)進行壓縮，默認不對數(shù)據(jù)進行壓縮。
}
重啟nginx使配置生效
/usr/local/nginx/sbin/nginx -s reload
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue中接收二進制文件流實現(xiàn)pdf預(yù)覽的方法
本文主要介紹了Vue中接收二進制文件流實現(xiàn)pdf預(yù)覽的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)二級彈框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue如何實現(xiàn)對請求參數(shù)進行簽名問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強大的功能之一，它是html、css、js等的一個聚合體，封裝性和隔離性非常強2022-12-12
文章介紹了如何在Vue中創(chuàng)建和使用自定義指令（v-permission）來實現(xiàn)按鈕權(quán)限控制,通過在`src/directives`目錄下創(chuàng)建`permission.js`文件并定義指令,然后在`index.js`中引入并全局注冊該指令,最后在`main.js`中引入`index.js`,即可在項目中使用自定義指令2026-03-03
這篇文章主要介紹了如何使用 vue + d3 畫一棵樹,本文通過文字說明加代碼分析的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
本文主要介紹了Vue3?全局切換字體大小的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
vue路徑分為絕對路徑、相對路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會被看作模塊依賴,本文給大家介紹vue中引用文件路徑問題,感興趣的朋友一起看看吧2023-12-12