Vue3项目打包优化

前言

本文介绍在实际项目中进行打包优化过程

目前评分 good

npm install web-vitals

在App.vue加入如下代码测试网页性能指标

import { onLCP, onINP, onCLS, onFCP, onTTFP } from 'web-vitals/attribution'onCLS(console.log)
onINP(console.log)
onLCP(console.log)
onFCP(console.log)
onTTFB(console.log)

刷新网页，我们可以看到在console出现指标评分如下：
在这里插入图片描述

背景

项目目前的技术栈环境如下：
vite@5.0.10
vue@3.3.13
pinia@2.1.7
ant-design-vue@4.0.8
vue-router@4.2.5

现状分析

优化的主要难点还是从哪里开始去优化，如果不清楚自己的项目问题出现在哪里，就显得比较盲目，不知道优化哪里，那在优化之前我们先分析一下我的文件依赖。

1. 安装插件 rollup-plugin-visualizer

npm install rollup-plugin-visualizer --save-dev

2. 修改vite.config.js

import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig(({ command, mode }) => {return {plugins: [visualizer({open: true})]}
})

3. 生成报告

在终端重新运行打包命令

npm run build

打包结束后，会自动打开报告页面如下图所示：
在这里插入图片描述
我们看到占体积较大的是第三方依赖如：z-render (ECharts 底层库 ZRender ), clay-gl ( ECharts -gl 底层库ClayGL)， e-charts，echarts-gl，ant-design-vue，highcharts，vxe-table。总体积是9.77MB

方案

1. Echarts 按需加载

在 Echarts 的官方文档我们看到有关按需引入依赖的说明 按需引入Echarts

我们在项目中使用Echarts和Echarts-GL主要是为了绘制3D曲面图，如下图所示：
在这里插入图片描述

1.1 使用 Canvas 或者 SVG 渲染

使用 Canvas 或者 SVG 渲染

如果你是按需引入，则需要手动引入需要的渲染器

import * as echarts from 'echarts/core';
// 可以根据需要选用只用到的渲染器
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';echarts.use([SVGRenderer, CanvasRenderer]);

然后，我们就可以在代码中，初始化图表实例时，传入参数 选择渲染器类型：

// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
// 等价于：
var chart = echarts.init(containerDom);// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, { renderer: 'svg' });

1.2 按需引入组件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,DatasetComponent,TransformComponent,VisualComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,DatasetComponent,TransformComponent,LabelLayout,UniversalTransition,CanvasRenderer
]);

1.3 按需引入echarts-gl

ECharts-GL 是 ECharts 的扩展包，提供 3D 绘图、地球可视化和 WebGL 加速

在 Echarts-GL 的 Github 主页我们看到按需引入的指引

import * as echarts from 'echarts/core';
import { SurfaceChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';echarts.use([SurfaceChart,Grid3DComponent
]);

按需引入组件时，有关控件的说明没有在官网文档中给出，需要阅读源码去寻找需要导入的组件。

1.4 总结

本项目按需引入Echarts和Echarts-GL，所作的全部修改如下：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,DatasetComponent,TransformComponent,VisualMapComponent
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// Minimal Import echarts-gl 模块
// import 'echarts-gl'
import { SurfaceChart } from 'echarts-gl/charts'
import { Grid3DComponent } from 'echarts-gl/components'// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,DatasetComponent,TransformComponent,VisualMapComponent,LabelLayout,UniversalTransition,CanvasRenderer,SurfaceChart,Grid3DComponent
]);

1.5 效果

重新打包

npm run build

得到report如下：
在这里插入图片描述
我们可以看到打包总体积从9.77MB减小到了8.03MB，减少了1.74MB，减少的值相对于初始值9.77MB减少了17.8%

2. 按需引入 ant-design-vue 组件库

ant-design-vue 默认支持基于 ES modules 的 tree shaking
自动按需引入组件，如果你使用的是 Vite ，我们推荐使用 unplugin-vue-components

2.1 unplugin-vue-components

该插件帮助开发者按需自动导入 Vue 组件

2.1.1 安装
npm install unplugin-vue-components -D

在这里插入图片描述

2.1.2 用法

像平常一样在模板中使用组件，它将按需导入组件，不再需要再导入 (import) 组件或者注册 (register ) 组件。如果您异步注册父组件（或路由懒加载），则自动导入的组件将与其父组件一起进行代码拆分。
它会自动将：

<template><div><HelloWorld msg="Hello Vue 3.0 + Vite" /></div>
</template><script>export default {name: 'App',}
</script>

转换成：

<template><div><HelloWorld msg="Hello Vue 3.0 + Vite" /></div>
</template><script>import HelloWorld from './src/components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld,},}
</script>

注意： 默认情况下，此插件将导入src/components路径中的组件。您可以使用选项进行自定义dirs

2.1.3 按需导入组件库

认识这个插件真的有种相见恨晚的感觉，它不仅适用于Ant-design-vue，还有其他流行的UI库如Element Plus提供了内置的解析器，以下是它支持的解析器：

  • Ant Design Vue
  • Arco Design Vue
  • BootstrapVue
  • Element Plus
  • Element UI
  • Headless UI
  • IDux
  • Inkline
  • Ionic
  • Naive UI
  • Prime Vue
  • Quasar
  • TDesign
  • Vant
  • Varlet UI
  • VEUI
  • View UI
  • Vuetify — Prefer first-party plugins when possible: v3 + vite, v3 + webpack, v2 + webpack
  • VueUse Components
  • VueUse Directives
  • Dev UI

示例用法：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import {AntDesignVueResolver,ElementPlusResolver,VantResolver,
} from 'unplugin-vue-components/resolvers'// your plugin installation
Components({resolvers: [AntDesignVueResolver(),ElementPlusResolver(),VantResolver(),],
})
2.1.4 配置项说明
Components({// 搜索组件的相对路径dirs: ['src/components'],// 组件有效的文件扩展名extensions: ['vue'],// 匹配要检测为组件的文件名的Glob正则表达式// 指定该项之后，`dirs` 和`extensions`选项都将被忽略// 如果你想要排除已被注册的组件，使用!通配符globs: ['src/components/*.{vue}'],// 搜索子目录deep: true,// 自定义组件的解析器resolvers: [],// 生成 `components.d.ts` 全局申明，也可以是自定义文件名的路径，如果已安装ts，那么默认值是truedts: false,// 子目录可以作为组件的namespace前缀directoryAsNamespace: false,// Collapse same prefixes (camel-sensitive) of folders and components// to prevent duplication inside namespaced component name.// works when `directoryAsNamespace: true`collapseSamePrefixes: false,// Subdirectory paths for ignoring namespace prefixes.// works when `directoryAsNamespace: true`globalNamespaces: [],// auto import for directives// default: `true` for Vue 3, `false` for Vue 2// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.// To install Babel, run: `npm install -D @babel/parser`directives: true,// Transform path before resolvingimportPathTransform: v => v,// 允许组件覆盖具有相同名称的其他组件allowOverrides: false,// Filters for transforming targets (components to insert the auto import)// Note these are NOT about including/excluding components registered - use `globs` for thatinclude: [/\.vue$/, /\.vue\?vue/],exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],// 项目的vue版本，如未指定，将自动检测// 可以接受的值: 2 | 2.7 | 3version: 2.7,// Only provide types of components in library (registered globally)types: []
})

2.2 修改构建配置 vue.config.js

// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({plugins: [// ...Components({resolvers: [AntDesignVueResolver({importStyle: false, // css in js}),],}),],
});

2.3 自动转换

然后你可以在代码中直接引入 ant-design-vue 的组件，插件会自动将代码转化为 import { Button } from 'ant-design-vue' 的形式。

import { Button } from 'ant-design-vue';

2.4 效果

重新打包

npm run build

得到report如下：
在这里插入图片描述
我们可以看到打包总体积从8.03MB减小到了6.33MB，减少了1.7MB，减少的量相对于初始值9.77MB，减少了17.4%

3. 按需引入vxe-table

环境

vxe-table@4.6.0
vite@5.0.10

vxe-table 官方文档介绍有关按需加载
的内容，有两种方式，vite-plugin-lazy-import 和 unplugin-vue-components 根据项目的当前环境去选择

方案

1. vite-plugin-lazy-import

如果您使用了 vite，借助插件 vite-plugin-lazy-import 可以实现按需加载模块

1.1 安装
npm install vite-plugin-lazy-import -D
1.2 配置构建工具
// vite.config.js
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'export default defineConfig({plugins: [// ...,lazyImport({resolvers: [VxeResolver({libraryName: 'vxe-table'})]})// ...]
})
2. unplugin-vue-components

如果您使用了 webpack，借助插件 unplugin-vue-components 可以实现按需加载模块，减少文件体积

2.1 安装
 npm install unplugin-vue-components @vxecli/import-unplugin-vue-components
2.2 配置构建工具
// vue.config.js
import Components from 'unplugin-vue-components/webpack'
import { VxeTableResolver } from '@vxecli/import-unplugin-vue-components'export default defineConfig({plugins: [// ...,Components({resolvers: [VxeTableResolver()]})]
})
3. 导入使用

以下是全量的组件及模块安装列表：

// ...
import {// 全局实例对象VXETable,// 可选表格模块// VxeTableFilterModule,// VxeTableEditModule,// VxeTableMenuModule,// VxeTableExportModule,// VxeTableKeyboardModule,// VxeTableValidatorModule,// VxeTableCustomModule,// 可选组件VxeIcon,VxeTable,VxeColumn,VxeColgroup,// VxeGrid,// VxeTooltip,// VxeToolbar,// VxePager,// VxeForm,// VxeFormItem,// VxeFormGather,// VxeCheckbox,// VxeCheckboxGroup,// VxeRadio,// VxeRadioGroup,// VxeRadioButton,// VxeSwitch,// VxeInput,// VxeSelect,// VxeOptgroup,// VxeOption,// VxeTextarea,// VxeButton,// VxeButtonGroup,// VxeModal,// VxeDrawer,// VxeList,// VxePulldown
} from 'vxe-table'
// ...// 导入默认的语言
import zhCN from 'vxe-table/es/locale/lang/zh-CN'// 导入主题变量，也可以重写主题变量
import 'vxe-table/styles/cssvar.scss'// 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
VXETable.setConfig({i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})function LazyVxeUITable(app) {// 可选表格模块// app.use(VxeTableFilterModule)// app.use(VxeTableEditModule)// app.use(VxeTableMenuModule)// app.use(VxeTableExportModule)// app.use(VxeTableKeyboardModule)// app.use(VxeTableValidatorModule)// app.use(VxeTableCustomModule)// 可选组件app.use(VxeIcon)app.use(VxeTable)app.use(VxeColumn)app.use(VxeColgroup)// app.use(VxeVxeGrid)// app.use(VxeTooltip)// app.use(VxeToolbar)// app.use(VxePager)// app.use(VxeForm)// app.use(VxeFormItem)// app.use(VxeFormGather)// app.use(VxeCheckbox)// app.use(VxeCheckboxGroup)// app.use(VxeRadio)// app.use(VxeRadioGroup)// app.use(VxeRadioButton)// app.use(VxeSwitch)// app.use(VxeInput)// app.use(VxeSelect)// app.use(VxeOptgroup)// app.use(VxeOption)// app.use(VxeTextarea)// app.use(VxeButton)// app.use(VxeButtonGroup)// app.use(VxeModal)// app.use(VxeDrawer)// app.use(VxeList)// app.use(VxePulldown)
}createApp(App).use(LazyVxeUITable).mount('#app')

采用方案

vite-plugin-lazy-import

安装

在这里插入图片描述

修改vite.config.js
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'export default defineConfig({plugins: [// ...,lazyImport({resolvers: [VxeResolver({libraryName: 'vxe-table'})]})// ...]
})
组件使用
import {// 可选组件VxeTable,VxeColumn
} from 'vxe-table'
// ...function LazyVxeUITable(app) {// 可选组件app.use(VxeTable)app.use(VxeColumn)
}createApp(App).use(LazyVxeUITable).mount('#app')
问题处理

console 有警告消息 Failed to resolve component: vxe-table-custom-panel
在这里插入图片描述
需要引入组件 VxeTableCustomModule 并注册，报错消失

最后改为：

import {// 可选组件VxeTable,VxeColumn,VxeTableCustomModule
} from 'vxe-table'
// ...function LazyVxeUITable(app) {// 可选组件app.use(VxeTable)app.use(VxeColumn)app.use(VxeTableCustomModule)
}createApp(App).use(LazyVxeUITable).mount('#app')

效果

在这里插入图片描述
我们可以看到打包总体积从6.33MB减小到了5.78MB，减少了0.55MB，减少的量相对于初始值9.77MB，减少了5.62%

总结

通过按需加载Echarts, Ant-design-vue和Vxe-table，我们将打包的体积从9.77MB减小到了5.78MB，一共减少了3.99MB，缩小到了初始值的59.16%

代码分割

我们在打包之后，遇到另外一个问题看到终端有一段提示文字：
在这里插入图片描述

(!) Some chunks are larger than 500 KB after minification. Consider:

  • Using dynamic import() to code-split the application
  • Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
  • Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

build.chunkSizeWarningLimit
类型： number
默认： 500
块大小警告的限制（以 kbs 为单位）

这段提示提示一个vite打包的问题，指的是存在体积过大（大于500KB）的单个js文件，一般调高chunk size就能解决这个问题

解决方案

export default defineConfig({plugins: [],build: {chunkSizeWarningLimit: 1500,rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}}}}}
})

效果

在这里插入图片描述
我们看到报错信息消失，且体积较大的两个文件也消失了，实际上是被分割成了多块js脚本
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/868617.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

cfDNA甲基化疾病早筛研究思路分享

cfDNA甲基化疾病早筛研究思路分享

游离DNA&#xff08;Circulating free DNA&#xff0c;cfDNA&#xff09;是人体组织释放到血液等循环体系中降解的DNA片段&#xff0c;是一种新型的肿瘤分子标志物。ctDNA甲基化是重要的表观学修饰之一&#xff0c;可以在不改变基因序列的情况下&#xff0c;改变遗传表现&#…
阅读更多...
身边的故事（十五）：阿文的故事：再消失

身边的故事（十五）：阿文的故事：再消失

物镜人非&#xff0c;沧海桑田。像我们这些普通的凡人&#xff0c;哪有什么试错的机会&#xff0c;每走一步都是如履薄冰&#xff0c;小心谨慎&#xff0c;错一步可能就会万劫不复。唉&#xff0c;如果...唉...哪有什么如果... 阿文的房子很快装修完成&#xff0c;入新房那天就…
阅读更多...
ubantu安装k8s集群服务

ubantu安装k8s集群服务

进行主机优化配置 参考&#xff1a; 修改主机名称 hostnamectl set-hostname k8s-node03 关闭swap分区 swapoff -a #临时关闭 sed -i /\/swap/s/^/# /etc/fstab #永久关闭 增加主机解析 cat >> /etc/hosts << EOF 10.1.60.119 k8s-master01 10.1.60.12…
阅读更多...
zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题

zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题

解决过程 第一次排查 最开始排查的是官方文档说的 https://api.onlyoffice.com/editors/troubleshooting#key 解决方案。参考的是官方的 https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip 基于Django的Python代码。 …
阅读更多...
短视频美化：成都柏煜文化传媒有限公司

短视频美化：成都柏煜文化传媒有限公司

短视频美化&#xff1a;创意与技术的艺术交融 在数字时代的浪潮中&#xff0c;短视频以其独特的魅力迅速崛起&#xff0c;成为人们生活中不可或缺的一部分。从记录生活点滴到分享创意灵感&#xff0c;短视频以其短小精悍、形式多样的特点&#xff0c;让每个人都能成为自己故事…
阅读更多...
Linux安装elasticsearch单机版

Linux安装elasticsearch单机版

一、检查内核 uname -a uname -m 二、下载版本 下载版本选择自己服务器相同的内核版本 我这边是aaech64 ES下载地址 Kibana 下载地址 二、上传服务器解压 tar -xvf elasticsearch-8.14.1-linux-aarch64.tar.gz 三、安装ES 因为ES不能用root用户启动先创建用户 #新增 es …
阅读更多...
vue-cli 脚手架详细介绍

vue-cli 脚手架详细介绍

4 vue-cli 脚手架 1 脚手架介绍 vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具&#xff0c;这个命令可以帮助我们快速的创建一个vue项目的基础架子。 脚手架&#xff1a;搭建好的一个架子&#xff0c;我们在架子上进行开发 开箱即用零配置基于webpack、webpac…
阅读更多...
新增多种图表类型，新增插件管理模块，DataEase开源数据可视化分析工具v2.8.0发布

新增多种图表类型，新增插件管理模块，DataEase开源数据可视化分析工具v2.8.0发布

2024年7月8日&#xff0c;人人可用的开源数据可视化分析工具DataEase正式发布v2.8.0版本。 这一版本的功能变动包括&#xff1a;图表方面&#xff0c;新增组合图、热力地图、符号地图、K线图等图表类型&#xff0c;并对已有的仪表盘、明细表、指标卡、富文本等图表类型进行了功…
阅读更多...
【已解决】微信小程序报错：request 合法域名校验出错 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”

【已解决】微信小程序报错：request 合法域名校验出错 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”

场景复现 最近在写微信小程序时&#xff0c;打开开发者工具会出现一下报错&#xff0c;甚至连手机移动端使用时也会出现“网络出错了”这样的错误提示。 解决方法 查看微信官方的文档和网上的一些解决方法&#xff0c;可以按照下面的图文步骤进行设置&#x1f447;&#x1f4…
阅读更多...
caeses软件许可优化解决方案

caeses软件许可优化解决方案

Caeses软件介绍 CAESES是一款十分很不错的三维建模仿真的软件。它功能很大、优化效率高、可以自动化优化、分析工具快速 CAESES拥有多种不同的试验设计及单目标、多目标优化算法&#xff0c;能够根据仿真计算评估的结果。软件可以帮助用户轻松的打造出自各种船舶、汽车、航空航…
阅读更多...
Ai Native应用开发（一）--数字人

Ai Native应用开发（一）--数字人

背景 刚参加完24年世界人工智能大会&#xff08;WAIC&#xff09;&#xff0c;聊聊自己的一些感受。这次会明显比去年多很多人&#xff0c;用人山人海来形容应该也不为过。根据我自己粗浅观察参会的人员也比去年更多样化。去年更多还是从业者或者是这块研究人员。今年每个论坛…
阅读更多...
sql盲注

sql盲注

文章目录 布尔盲注时间盲注 布尔盲注 介绍&#xff1a;在网页只给你两种回显的时候是用&#xff0c;类似于布尔类型的数据&#xff0c;1表示正确&#xff0c;0表示错误。 特点&#xff1a;思路简单&#xff0c;步骤繁琐且麻烦。 核心函数&#xff1a; length()函数substr()函…
阅读更多...
day4单向链表

day4单向链表

主程序 #include "fun.h" int main(int argc, const char *argv[]) { node_p Lcreate_head();//创建链表 printf("########################链表的头插尾插\n"); insert_head(L,45);//头插 insert_head(L,45); insert_tail(L,45);/…
阅读更多...
Go-Zero 框架使用 MongoDB，数据采集入库如此简单

Go-Zero 框架使用 MongoDB，数据采集入库如此简单

目录 引言 环境准备 如何使用 main入口代码实现 实现采集网络接口 总结 其他资源 引言 Go-Zero 是一个高性能、可扩展的微服务框架&#xff0c;专为 Go 语言设计。它提供了丰富的功能&#xff0c;如 RPC、RESTful API 支持、服务发现、熔断器、限流器等&#xff0c;使开…
阅读更多...
PyQt5显示QImage并将QImage转换为PIL图像保存到缓存

PyQt5显示QImage并将QImage转换为PIL图像保存到缓存

PyQt5显示QImage并将QImage转换为PIL图像保存到缓存 1、效果图 2、流程 1、获取摄像头资源，打开摄像头 2、截取图像 3、opencv读的通道是BGR,要转成RGB 4、往显示视频的Label里显示QImage 5、将QImage转换为PIL图像,并保存到缓存 6、获取图像中人脸信息3、代码 # -*- codin…
阅读更多...
2024年【安全员-C证】考试及安全员-C证免费试题

2024年【安全员-C证】考试及安全员-C证免费试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-C证考试根据新安全员-C证考试大纲要求&#xff0c;安全生产模拟考试一点通将安全员-C证模拟考试试题进行汇编&#xff0c;组成一套安全员-C证全真模拟考试试题&#xff0c;学员可通过安全员-C证免费试题全真模…
阅读更多...
论文解析——Full Stack Optimization of Transformer Inference: a Survey

论文解析——Full Stack Optimization of Transformer Inference: a Survey

作者及发刊详情 摘要 正文 主要工作贡献 这篇文章的贡献主要有两部分&#xff1a; 分析Transformer的特征&#xff0c;调查高效transformer推理的方法通过应用方法学展现一个DNN加速器生成器Gemmini的case研究 1&#xff09;分析和解析Transformer架构的运行时特性和瓶颈…
阅读更多...
堆叠的作用

堆叠的作用

一、为什么要堆叠 传统的园区网络采用设备和链路冗余来保证高可靠性&#xff0c;但其链路利用率低、网络维护成本高&#xff0c;堆叠技术将多台交换机虚拟成一台交换机&#xff0c;达到简化网络部署和降低网络维护工作量的目的。 二、堆叠优势 1、提高可靠性 堆叠系统多台成…
阅读更多...
Linux--线程（概念篇）

Linux--线程（概念篇）

目录 1.背景知识 再谈地址空间&#xff1a; 关于页表&#xff08;32bit机器上&#xff09; 2.线程的概念和Linux中线程的实现 概念部分&#xff1a; 代码部分&#xff1a; 问题&#xff1a; 3.关于线程的有点与缺点 4.进程VS线程 1.背景知识 再谈地址空间&#xff1a…
阅读更多...
Linux中的粘滞位及mysql日期函数

Linux中的粘滞位及mysql日期函数

只要用户具有目录的写权限, 用户就可以删除目录中的文件, 而不论这个用户是否有这个文件的写 权限. 为了解决这个不科学的问题, Linux引入了粘滞位的概念. 粘滞位 当一个目录被设置为"粘滞位"(用chmod t),则该目录下的文件只能由 一、超级管理员删除 二、该目录…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023