build: 📦 依赖预构建和打包优化

vite.config.ts

@@ -98,6 +98,26 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       reportCompressedSize: true,
       // chunk 大小警告的限制（以 kbs 为单位）
       chunkSizeWarningLimit: 2000,
+      // 自定义底层的 Rollup 打包配置
+      rollupOptions: {
+      // 静态资源分类打包
+        output: {
+          chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
+          entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
+          assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
+          // 将 node_modules 三方依赖包最小化拆分
+          manualChunks(id) {
+            if (id.includes('node_modules') && !id.includes('@antv')) {
+              const paths = id.toString().split('node_modules/')
+              if (paths[2]) {
+                return paths[2].split('/')[0].toString()
+              }
+
+              return paths[1].split('/')[0].toString()
+            }
+          },
+        },
+      },
     },
 
     css: {
@@ -133,11 +153,28 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
 
     // 有需要再打开，否则 既不优化 也不排除
-    // optimizeDeps: {
-    //   include: [],
-    //   // 打包时强制排除的依赖项
-    //   exclude: [],
-    // },
+    optimizeDeps: {
+      /**
+       * 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
+       * 页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
+       * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include 里，
+       * 否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），
+       * 因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
+       * 温馨提示：如果你使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，
+       * 就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
+       */
+      include: [
+        'pinia',
+        'lodash-es',
+        'axios',
+        '@vicons/antd',
+        '@vicons/ionicons5',
+      ],
+      // 打包时强制排除的依赖项
+      exclude: [
+
+      ],
+    },
 
     // 加载插件
     plugins: createVitePlugins(viteEnv, isBuild, prodMock),