vite 와 vue3 빌드후 dist/assets/*.js 많이 나오는것을 필요한 js 만 나오게

Vite에서 dist/assets/ 폴더의 모든 .js 파일을 한 개의 파일로 묶기 위해 다른 접근 방법을 시도해 보겠습니다. 아래의 방법을 따라해 보세요:

1. npm install concat-cli  명령을 사용하여 concat-cli 패키지를 설치합니다.
2. package.json 파일을 열고, "scripts" 섹션에 다음을 추가합니다:

jsonCopy code

"scripts": { "build": "vite build && concat-cli -f ./dist/assets/*.js -o ./dist/assets/all.js" }

1. 터미널에서 npm run build 명령을 실행합니다. 이 명령은 vite build를 실행하고, 그 후에 concat-cli를 사용하여 dist/assets/ 폴더의 모든 .js 파일을 dist/assets/all.js 파일로 결합합니다.

이 방법은 먼저 Vite를 통해 프로젝트를 빌드한 다음, concat-cli를 사용하여 .js 파일을 하나로 결합하는 방식입니다. 결과적으로 dist/assets/all.js 파일이 생성되며, 해당 파일은 dist/assets/ 폴더의 모든 .js 파일을 포함하게 됩니다.

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  // server: {
  //   hmr: false
  // },
  worker: {
    format: 'es',
  },
  plugins: [
    vue(),
    nodePolyfills({
      // To exclude specific polyfills, add them to this list.
      exclude: [
        'buffer', // Excludes the polyfill for `fs` and `node:fs`.
      ],
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    }),
    
  ],
  css: {
    preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/style/__test.scss";
          `
        },
    },
  } ,
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

--- 안됨 ---

rollupOptions: {
	output: {

        
        
        /*
        src/tr 안에 있는 *.js 파일들을 group-all~~~.js 로 하나로 해준다.
        그런데 해당 개별파일들도 생성된다. (참조도 하고 있다. 지우면 안된다.)
        
        manualChunks(id) {
          if (id.includes('/src/tr')) {
            return 'group-all';
          }
         
        },
        */
       
        /*
				manualChunks: {
          'Wtr': [
            './src/tr/W1910A01.js',
            './src/tr/W6112S01.js',
            './src/tr/W6115S01.js',
            './src/tr/WretimFA.js',
            './src/tr/WretimFB.js',
            './src/tr/WretimRegiDel.js',
            './src/tr/WretimRegiDelId.js',
          ],
        },
        */

			}
		}

원인 찾음 -> 안됨 vite 는 무조건 js 파일을 만듬

프로젝트 폴더

src
  components
  js
  store
  style
  tr
    +header
      base.js
      realTime.js
      realTimeId.js
      realTimeRes.js
    W1910A01.js
    W6112S01.js
    
 위와같이 tr 디렉토리 밑에 W1910~ W6112~ 등 tr 포맷형태의 js 파일이 있다.
 위와 같은 상태에서 build 시 dist/assets/W1910A01.js W6112S01.js 각각 파일이 생성된다.
 파일생성되지 않게 하기 위해서 아래와 같이 변경한다.
 
 
 tr
    +header
      base.js
      realTime.js
      realTimeId.js
      realTimeRes.js
    +main
      W1910A01.js
      W6112S01.js
 
    
main 폴더를 만들고 그 하위에 W19~~ tr 내용을 넣는다 .

 

위와같이 하면 프로그램 작동 안함

원인 찾음 

trData.js 원본소스

    if(header.hasOwnProperty('routing')) { // 조회
        const trName = header.routing.value.trim();                   
        tr = await import(`../../tr/main/${trNameT}.js`);

    } else {    // 실시간
        tr = await import(`../../tr/main/${component}.js`);
    }

    resolve(tr.default);

위와같이 동적으로 tr import 한다. vite 에서는 동적으로 import 하는것은 build 시에서 dist/assets/ 에 모든걸 생성한다.

하지만 배포시에 최소한의 파일만 배포해야 되기때문에 동적으로 import 하는걸 지양한다.

trData.js 수정된 소스

/**
 * 비지니스 로직 별로 다르게 차이 날수 있는 부분들을 처리하기 위한 모듈
 */

//사용 되는 헤더를 모두 포함
import { dd } from '@/js/dd';
import base from '@/tr/header/base.js';
import realTime from '@/tr/header/realTime.js';
import realTimeId from '@/tr/header/realTimeId.js';
import realTimeRes from '@/tr/header/realTimeRes.js';

//-- 동적이 아닌 정적으로 사용하기 위해 추가
import W1910A01 from '@/tr/main/W1910A01';
import W6115S01 from '@/tr/main/W6115S01';
import W6112S01 from '@/tr/main/W6112S01';
import WretimRegiDelId from '@/tr/main/WretimRegiDelId';
import WretimRegiDel from '@/tr/main/WretimRegiDel';
import WretimFA from '@/tr/main/WretimFA';
import WretimFB from '@/tr/main/WretimFB';


const trObj = {
    W1910A01: W1910A01,
    W6115S01: W6115S01,
    W6112S01: W6112S01,
    WretimRegiDelId: WretimRegiDelId,
    WretimRegiDel: WretimRegiDel,
    WretimFA: WretimFA,
    WretimFB: WretimFB,
}
//-- //동적이 아닌 정적으로 사용하기 위해 추가

const headerObj = {
    base: base,
    realTime: realTime,
    realTimeId: realTimeId,
    realTimeRes: realTimeRes,
};

const trData={
    regPattern:'{{.*}}', //정보입력 파싱 패턴
    info:function(string){
        
        if(string.indexOf('{{') >= 0) { //(0D00 조회)

            /* 정보입력부분의 파싱 */
            const regExp=new RegExp(this.regPattern);
            const temp = string.match(regExp)[0].replace('{{','{').replace('}}','}');    
            const infoJson=JSON.parse(temp);
            
            /* 헤더선택 */
            const header = headerObj[infoJson.h];
            
            
            /* 반환데이터 구성 */
            const returnJson={
                header:header,
                component:infoJson.c,
                method:infoJson.m,
            }
            
            
            return returnJson;

        } else { //실시간 (0C00 실시간)

            /* 반환데이터 구성 */
            const returnJson = {
                header: '',
                component: '',
                method: '',
            }
            
            const gubun = string.substring(6, 7).toUpperCase(); // 실시간 구분
            const gubunType = string.substring(7, 9).toUpperCase(); // 실시간 구분(FA FB E0:긴급공지사항 MD:맞춤환율도달 E1:강제종료)
            let realType;

            if(gubun == 'I') { // 실시간 체결(49)

            } else if(gubun == 'F') { // 맞춤환율도달(46)
            
            } else if(gubun == 'H') { // 실시간환율(FA/FB) 47(G) 48(H)
                
                switch(gubunType) {
                    case 'FA' : realType = 'WretimFA';  break;
                    case 'FB' : realType = 'WretimFB';  break;
                    /*
                    case 'O1' : realType = 'WretimRtsOrder';  break;
                    case 'E0' : realType = 'WretimExrtNotice';  break;       // 긴급공지사항
                    case 'MD' : realType = 'WretimExrtAlm';  break;       // 맞춤환율도달
                    case 'E1' : realType = 'WretimLogout';  break;       // 강제종료
                    */
                }

                returnJson.header = realTimeRes;
                returnJson.component = realType;
                returnJson.method = 'recive';

            } else  { // 알람
            
            }
            
            return returnJson;

        }
    },
    /**
     * 해더 데이터의 정보로 tr포맷을 반환함
     * @param {*} header 
     * @returns 
     */
    getTrFormat: function(header, component){
        return new Promise(async function(resolve,reject){
            
            let tr;
            if(header.hasOwnProperty('routing')) { // 조회
                const trNameT = header.routing.value.trim();                   

                /**
                 * 2023.07.11 아래와 같이 동적으로 import 해도 되긴된다.
                 * 그런데 build 시에는 W1910~ 모든 tr 을 넣어줘야되기때문에
                 * 상단에서 import 한후에 사용하기로 한다.
                 */
                //tr = await import(`../../tr/main/${trNameT}.js`);

                tr = trObj[trNameT];
                
                
            } else {    // 실시간
                tr = trObj[component];;
                //tr = await import(`../../tr/main/${component}.js`);
            }
            
            //resolve(tr.default); 
            resolve(tr); 
        })
    }
}
export default trData;

그래도 안되면

App.vue 에 모두 꽃아줘야함

<retimFA>

....

....

import retimFA from '@/components/n_WretimFA.vue';