使用 dynamic import / Rollup chunk /条件编译 优化项目打包体积

使用动态导入（Dynamic Import）

动态导入是一种异步加载模块的方式，只有在需要的时候才会加载模块，而不是将所有模块打包到一个巨大的文件中。这可以减小初始加载时的文件大小。

满足以下两个条件即可：

1. component从组件改为函数，并import路径
2. 改路径添加一个默认导出

打包后：

• 所有动态引入的文件都会单独打包

Rollup chunk

Rollup 允许将代码拆分为多个 chunk，每个 chunk 可以单独加载。这对于将应用程序拆分为较小的块非常有用，以减少初始加载时的文件大小。在配置文件中，可以使用 output 选项来配置 chunk 的生成：

 build: {
    rollupOptions: {
      output: {
        manualChunks(id: any) {
          if (id.includes('echarts')) { 
            return 'echarts';
          }
          if (id.includes('mock') || id.includes('faker')) {
            return 'mock';
          }
          if (id.includes('vant')) {
            return 'vant';
          }
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  },

打包后：

• 最后新增了4个种类的包（这4个种类的包为静态引入）

参考：Rollup chunk | Vite 官方中文文档

条件编译

在代码示例中使用了一个条件来定义一个名为 DEBUG 的变量，取决于 command 的值是 'build' 还是其他值。这种方式在在开发环境和生产环境中有不同的配置需求时非常有用。

示例中，如果 command 的值是 'build'，则 DEBUG 被设置为 false，否则被设置为 true。这可以用于控制是否在代码中包含调试信息或其他调试相关的功能。

export default defineConfig(({command})=>{
  return{
    define = command === 'build' ? {
      DEBUG: false
    } : {
      DEBUG: true
    };
    ...
    ...
  }
)}

// 在代码中使用 DEBUG 变量
if (DEBUG) {
  console.log('正在调试');
  // 在开发环境中执行的调试代码
} else {
  // 在生产环境中执行的代码，不包含调试信息
}

在这个示例中，根据 command 的值，DEBUG 变量的值被设置为 true 或 false。然后，根据 DEBUG 变量的值，你可以在代码中包含或排除调试相关的功能或输出。在开发环境中，DEBUG 为 true，你可以在控制台中看到调试信息；在生产环境中，DEBUG 为 false，调试信息不会被包含在最终的输出中，以减小文件大小。

• 打包后：
  我这里根据上面方法对mock做了处理使mock不会在生产环境中打包

参考：使用环境变量 Vite | Vite 官方中文文档 (vitejs.dev)