vue3 vite打包分如何解决？

Question

项目使用pnpm包管理工具，vite打包分包以后 主文件变成.pnpm 并且包的体积并未减小

dist/static/js/.pnpm-1d5e7c47 .js             2,602.43 kB │ gzip: 757.45 kB

vite.config.ts的配置

build: {
      sourcemap: false,
      minify: 'terser',
      chunkSizeWarningLimit: 1500,
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString();
            }
          },
          chunkFileNames:"static/js/[name]-[hash] .js",
          entryFileNames:"static/js/[name]-[hash] .js",
          assetFileNames:"static/[ext]/[name]-[hash].[ext]",
          // 添加缓存关信息
          headers:{
            "Cache-Control":"no-store"
          }
        }
      }
    },

Answer 1

引自免费微信小程序：皆我百晓生

在Vite中，通过配置rollupOptions可以实现自动分包和模块拆分以减小主文件体积。从您提供的vite.config.ts配置来看，您已经尝试了对node_modules中的第三方依赖进行手动分包处理，但是主文件名中出现了.pnpm-1d5e7c47.js，并且包体积没有明显减少。针对这个问题，我们可以分析一下可能的原因并提供相应的解决方案：

1. pnpm 的软链接影响： pnpm 使用了与npm/yarn不同的存储和链接策略，它会将依赖库放在一个全局缓存目录，并在项目中创建符号链接指向这些实际的文件。这可能导致Vite打包时遇到的问题，即输出的chunk文件包含了.pnpm相关的路径信息。为解决此问题，您可以尝试在output.chunkFileNames、output.entryFileNames等选项中排除.pnpm相关字符串。

   // vite.config.ts
   import { defineConfig } from 'vite';
   import { resolve } from 'path';
   
   export default defineConfig({
     build: {
       rollupOptions: {
         output: {
           chunkFileNames: (id) => {
             // 过滤掉.pnpm前缀
             const filename = id.toString().replace(/\.pnpm.*?\//, '');
             return `static/js/${filename}-[hash].js`;
           },
           // ... 其他配置不变
         }
       }
     }
   });
   

2. 手动分包逻辑： 您的手动分包逻辑仅根据node_modules内的目录结构划分，但这可能不足以达到理想的分包效果。为了更精细地控制分包，您可以考虑基于package.json的名字来分组：

   manualChunks(id) {
     if (id.includes('node_modules')) {
       const pkgName = require.resolve(id).split('node_modules/')[1].split('/')[0];
       return pkgName;
     }
   },
   

3. 未正确实现分包优化： 确保Vite能正确识别到需要分包的代码块。Vite默认已经有了一定程度的按需加载和动态导入的处理能力，对于大型应用来说，结合合理的模块导入方式（如懒加载）可能会比单纯依靠rollupOptions的手动分包更为有效。

4. 检查其他构建配置： 分包的目的是为了将大体积的模块分割成多个较小的chunks，从而实现按需加载。确保压缩选项（terserOptions）生效，并且检查是否开启了预构建或tree-shaking功能。

请根据实际情况调整上述建议，同时持续关注Vite官方文档更新以及社区的最佳实践，以获得最佳构建效果。若以上调整仍无法解决问题，请进一步审视项目源码中是否有大量未优化的全局引用或其他导致无法有效分包的因素。