vue3 + vite 性能优化 ( 从5s -＞ 0.5s )_vite5 vue3

Ⅰ、Vue + Vite 构建项目性能优化

• vite 相比于 webpack 优势显著；
• 然而 社区，却 不够成熟 ，参考资料较少；
• 如何让vue + vite 构建项目变的 访问秒开 （要想足够快，就是让首次加载足够小），从下面几步做起 =>
• 个人通过学生价购买的服务器，已达到0.5s内秒开 => 点击体验
  

Ⅱ、Vue +Vite的优化有那些？

1. ui组件库的优化

• ui 组件库 是打包变大的 显著的原因之一 ，可能全量导入或批量导入了ui组件（去页面一次性加载了）
• 如果只用到 ui 组件库的部分 ，如何做到用多少，打包多少 ？
• 下面推荐一个 vite 的插件 （以 element Plus ，Antd of vue ，最常用的2中ui库来举例）

① 安装：

	npm  i  -D unplugin-vue-components
1

② main.js => 无需配置

• main.js 不需要在 import 组件，再去use 绑定了 【注意：否则包变大，反而无效】
• 直接用，用多少打包多少

③ 只需配置 => vite.config

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      dts: true,
      dirs: ['src/components'], // 按需加载的文件夹
      resolvers: [
          ElementPlusResolver(),  // Antd   按需加载
          AntDesignVueResolver()  // ElementPlus按需加载
     ] 
    })
  ],
  // ..................................
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

2. Icon 图标优化

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

① 安装插件

	npm i -D unplugin-icons     //安装
1

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

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

③ 配置 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 }),
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

④ vue 中 直接使用

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

⑤ 示例如下

	<i-carbon-4k />
1

• Icon 图标集 地址 ： 点击这里 => 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();
      }
    }
  },
1
2
3
4
5
6
7
8

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

4. 路由懒加载

• 路由 懒加载就是最常规的啦
• 采用 () => import(’/…’) 来导入
  

5. 个人vite.config 配置参考

达到效果 => 点击体验

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,
      },
    },
  },
  resolve: {
    alias: {
      "/@": resolve("src"),
    }
  },

  // 强制预构建插件包
  optimizeDeps: {
    include: ['axios'],  //用于鉴权
  },

  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    rollupOptions: {
      minify: 'terser',// 混淆器，terser构建后文件体积更小
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      },
    },
  },

  server: {  // 本地 - 运行配置，及反向代理配置
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    proxy: {
      '/api': {
        target: 'http://localhost:7001',   //代理接口
        changeOrigin: true,
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73