#vite #webpack #console.log #플러그인 #설정 #npm #번들링

 

웹 경량화를 사용하기 위한 vite나 webpack을 사용할때 불필요한 정보를 미출력하기 위해서 Bundling을 할때 console.log를 삭제하는 plugin을 소개할려고 합니다. 

 

🦖Vite plugin(vite-plugin-remove-console)

* 각 패키지 관리도구별 설치 방법 

# npm npm install vite-plugin-remove-console -D
# yarn yarn add vite-plugin-remove-console -D
# pnpm pnpm add vite-plugin-remove-console -D

👉 Npm - Node Package Manaber : Node.js의 기본 패키지 관리도구로 가장 널리 사용됨
👉 yarn - FaceBook에서 개발한 패키지 관리도구로 NPM보다 빠르고 안정적인 설치속도 및 다양한 기능제공
👉 pnpm : npm과 yarn의 단점을 해결하려는 목표로 개발된 도구로 디스크 공간을 절약 및 빠른 설치 속도 제공
🎈 pnpm은 Zoltan Kochan이라는 개발자가 만든 오픈 소스 프로젝트

🤔vite.config.js파일에 명시 

👉 import removeConsole from 'vite-plugin-remove-console'; 선언

👉plugins 옵션에 removeConsole() 플러그인 선언 

🎈 번들링을 통해서 로컬, 개발, 운영 환경을 구성중이여서 운영일때만 플러그인 적용을 위해서 
🎈...(mode === 'prod' ? [removeConsole()] : [])  이런식으로 mode값을 전달받아  prod환경일때만
플러그인 적용 진행
🎈... 스프레드 연산자(spread operator) 배열이나 객체럴 펼쳐서 요소를 개별적으로 처리 진행  
Ex)

    👉배열 합산
    
        const arr1 = [1, 2, 3];
        const arr2 = [4, 5, 6];

        // 두 배열을 합칠 때 스프레드 연산자를 사용
        const combinedArr = [...arr1, ...arr2];

        console.log(combinedArr);  // [1, 2, 3, 4, 5, 6]

    👉배열 복사
    
        const arr = [1, 2, 3];
        const copiedArr = [...arr];

        copiedArr.push(4);

        console.log(arr);         // [1, 2, 3]
        console.log(copiedArr);   // [1, 2, 3, 4]

🤔vite.config.js 

import { fileURLToPath, URL } from 'node:url'; 
import { defineConfig } from 'vite'; 
import vue from '@vitejs/plugin-vue'; 
import removeConsole from 'vite-plugin-remove-console'; // 추가 

export default defineConfig({ 
    plugins: [ 
        vue(), 
        ...(mode === 'prod' ? [removeConsole()] : [])                                                 // console.log 삭제 Plugin      
    ], 
	resolve: { 
        alias: { 
            '@': fileURLToPath(new URL('./src', import.meta.url)), 
        }, 
	}, 
});

 

https://www.npmjs.com/package/vite-plugin-remove-console

vite-plugin-remove-console

🦖Webpack(TerserPlugin)

🤔 webpack.config.js

웹팩에서는 TerserPlugin을 통해서 Bundling 진행시 console.log를 미표기 할수 있습니다. 

* 각 패키지 관리도구별 설치 방법 

# npm install terser-webpack-plugin --save-dev
# yarn add terser-webpack-plugin --dev
# pnpm add terser-webpack-plugin --save-dev

👉 Npm - Node Package Manaber : Node.js의 기본 패키지 관리도구로 가장 널리 사용됨
👉 yarn - FaceBook에서 개발한 패키지 관리도구로 NPM보다 빠르고 안정적인 설치속도 및 다양한 기능제공
👉 pnpm : npm과 yarn의 단점을 해결하려는 목표로 개발된 도구로 디스크 공간을 절약 및 빠른 설치 속도 제공
🎈 pnpm은 Zoltan Kochan이라는 개발자가 만든 오픈 소스 프로젝트

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production', // 프로덕션 모드에서 압축 수행
  optimization: {
    minimize: true, // 코드 압축 활성화
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // console.log 제거
          },
        },
      }),
    ],
  },
};