Web前端最全vue3 + vite 性能优化 ( 从5s -＞ 0，web前端经典面试题

本文链接：https://blog.csdn.net/2401_84618831/article/details/138975214

计算机网络

HTTP 缓存
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
HTTP 常用的请求方式，区别和用途？
HTTPS 是什么？具体流程
三次握手和四次挥手
你对 TCP 滑动窗口有了解嘛？
WebSocket与Ajax的区别
了解 WebSocket 嘛？
HTTP 如何实现长连接？在什么时候会超时？
TCP 如何保证有效传输及拥塞控制原理。
TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

链表
字符串
数组问题
二叉树
排序算法
二分查找
动态规划
BFS
栈
DFS
回溯算法

plugins: [
// 按需引入
Components({
dts: true,
dirs: [‘src/components’], // 按需加载的文件夹
resolvers: [
ElementPlusResolver(), // Antd 按需加载
AntDesignVueResolver() // ElementPlus按需加载
]
})
],
// …
}


* **dirs属性** => 设置 **按需加载的文件夹** 如 src/components ；
* **该文件夹** 的组件 **不需要 import** **按命名**就可全局引入；
* **ElementPlusResolver()**、 **AntDesignVueResolver()**  分别为element Plus 和 Antd 按需导入方法；


  

  

#### 2. Icon 图标优化


* 使用ui 组件库的图标，一般都会把**一组Icon** 图标 **全部打包**进去；
* 如何优化呢，我们需要配合上面的插件 ↑；


**① 安装插件**

npm i -D unplugin-icons     //安装


**② 安装 Icon库 （全量 和 选择）**

npm i -D @iconify/json
npm i -D @iconify-json/carbon    => 只下载该图标集


**③ 配置 vite.config**

…
import Components from ‘unplugin-vue-components/vite’
import Icons from ‘unplugin-icons/vite’
import IconsResolver from ‘unplugin-icons/resolver’
…
export default {
plugins: [
vue(),
Components({
resolvers: [
IconsResolver(),
]
}),
Icons({ autoInstall: true }),
],
}


**④ vue 中 直接使用**


* **i - 图标集名 - 标图名**；
* 直接使用 => 不需要任何导入；


**⑤ 示例如下**

<i-carbon-4k />


![在这里插入图片描述](https://img-blog.csdnimg.cn/698afdd6747a49a6a83b09c02cf0e06c.png)


* Icon 图标集 地址 ： [**点击这里**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) => **Antd 、element Plus** 都有


  

  

#### 3. js最小拆包


* 配置vite.config 的 **output** 属性

output: {
// 最小化拆分包
manualChunks(id) {
if (id.includes(‘node_modules’)) {
return id.toString().split(‘node_modules/’)[1].split(‘/’)[0].toString();
}
}
},


* 让打开那个页面，加载那个页面的js ，让之间的关联足够小
* 按需加载 js 每个页面的 js 逻辑


  

  

#### 4. 路由懒加载


* 路由 懒加载就是最常规的啦
* 采用 **() => import(’/…’)**  来导入  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6979d6d6eae545cc8d0a94bbc7b3142d.png)


#### 5. 个人vite.config 配置参考


[**达到效果 => 点击体验**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)

import { defineConfig } from “vite”; // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import { resolve } from “path”; // 主要用于alias文件路径别名
import vue from ‘@vitejs/plugin-vue’;
import Components from ‘unplugin-vue-components/vite’;

// icon 按需引入
import Icons from ‘unplugin-icons/vite’;
import IconsResolver from ‘unplugin-icons/resolver’;

// Antd 按需引入
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’

export default defineConfig({
plugins: [
vue(), // 配置需要使用的插件列表
Components({
resolvers: [
IconsResolver(),
AntDesignVueResolver()
]
}),
Icons({ autoInstall: true }),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},