vite常用配置（优化）

前言

入职新公司，接手之前的项目，项目用vite+vue3构建，使用npm进行管理。希望能统一使用pnpm进行包管理，于是有了这一次的优化。

优化之前的配置

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { loadEnv } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default ({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  const alias = {
    '@': resolve(__dirname, 'src'),
  }
  return {
    base: env['VITE_PUBLIC_PATH'],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "src/style/index.scss";'
        }
      }
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        eslintrc: {
          enabled: false,
        },
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    resolve: {
      alias,
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      host: env['VITE_APP_HOST'],
      port: env['VITE_APP_PORT'],
      https: false,
      open: true,
      proxy: {
        '/api': {
          target: env['VITE_APP_DEV_URL'],
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      strictPort: false,
    },
    build: {
      sourcemap: true,
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      },
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: false,
          drop_debugger: false,
        },
      },
    }
  }
}

存在的问题&优化思路

1.构建后白屏

之前使用npm构建的时候是没问题的，很明显是切换至pnpm之后造成的，且打包之后dist中出现了名字中带有.pnpm.js和.pnpm.css相关的文件，问题应该是出现在代码分割这里，由于使用了pnpm，node_modules中会有一个叫.pnpm的文件夹，之前的代码把这个文件夹也进行了分割

2.打包后有缓存。

这个属于比较常见的问题了，主要还是通过在文件名后面添加时间戳来解决

3.打包后dist文件夹目录结构不美观

所有的文件都在assets文件夹下，希望能像之前webpack一样，根据文件夹区分

4.生产环境移除console没有生效

查阅vite文档，发现terser需要另外安装相关的npm包，实际上vite默认使用esbuild，自带了console移除

5.写配置项的时候编辑器没有智能提示

使用defineConfig

6.生产环境没有关闭sourcemap

根据环境变量判断即可

优化后的代码

import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite' // 解决问题五
import { resolve } from 'path'
import { loadEnv } from 'vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// import { visualizer } from "rollup-plugin-visualizer"; // 打包分析
const time = new Date().getTime(); // 当前时间戳，防止缓存
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    base: env['VITE_PUBLIC_PATH'],
    // 服务端配置
    server: {
      host: '0.0.0.0',
      port: env['VITE_APP_PORT'],
      https: false,
      open: true,
      proxy: {
        '/api': {
          target: env['VITE_APP_DEV_URL'],
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      strictPort: false,
    },
    // 插件配置
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        eslintrc: {
          enabled: false,
        },
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // 打包分析插件引入
      // visualizer({
      //   open: true
      // }),
    ],
    // 解析配置
    resolve: {
      // 路径别名
      alias: {
        '@': resolve(__dirname, 'src')
      },
      // 免后缀
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    css: {
      // scss全局变量注入
      preprocessorOptions: {
        scss: {
          additionalData: '@import "src/style/index.scss";'
        }
      }
    },
    // 构建配置
    build: {
      // 生产环境不生成sourcemap，减小体积，解决问题六
      sourcemap: env.VITE_NODE_ENV === 'production' ? false : true,
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          // 使用时间戳拼接在文件名后面，防止浏览器缓存，解决问题二
          chunkFileNames: `static/js/[name].[hash]${time}.js`,
          entryFileNames: `static/js/[name].[hash]${time}.js`,
          // 根据文件后缀生成文件夹，对dist目录中的文件进行归类，解决问题三
          assetFileNames: `static/[ext]/[name].[hash]${time}.[ext]`,
          // 代码分割改为指定要分割的库，解决问题一
          manualChunks: {
            vue: ['vue', 'vue-router'],
            pinia: ['pinia', 'pinia-plugin-persist'],
            xlsx: ['xlsx'],
            'lodash-es': ['lodash-es'],
            'element-plus': ['element-plus'],
            'vue3-ace-editor': ['vue3-ace-editor'],
          },
        }
      },
      // 如果要使用terser移除console，需要先npm安装terser，然后把这里改为terser，由于vite默认使用esbuild，这里不需要配置
      // minify: 'esbuild',
    },
    // 生产环境时移除console.log()，解决问题四
    esbuild: {
      drop: env.VITE_NODE_ENV === 'production' ? ['console', 'debugger'] : []
    }
  }
})