[Vue3, Vite] npm run build 시 warning Expected identifier but found “-” , Some chunks are larger than 500 kB after minification 제거 방법

npm run build 하는데 거슬리는 워닝이 발생한다. 하나는 css문제, 다른 하나는 chunk 사이즈 문제이다.

arnings when minifying css:
▲ [WARNING] Expected identifier but found "-" [css-syntax-error]

    <stdin>:17594:2:
      17594 │   -: T;
            ╵   ^

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

해결방법

vite.config.ts 파일에 아래 내용을 추가해준다.

  build: {
    cssMinify: false,             // CSS 축소 비활성화로 CSS 경고 해결
    chunkSizeWarningLimit: 2000   // 청크 크기 경고 해결
  },

vite.config.ts 파일 전체 내용은 다음과 같다.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build: {
    cssMinify: false,             // CSS 축소 비활성화로 CSS 경고 해결
    chunkSizeWarningLimit: 2000   // 청크 크기 경고 해결
  },
})