본문 바로가기

서버/Webpack

Webpack - bundling 사이즈 줄이기 간단하게 실습

728x90

 

번들링 사이즈 줄이기 전과 후 용량 비교

줄이기 전(왼쪽) 줄인 후(오른쪽)

terser-webpack-plugin 는 webpack5부터 내장된 plugin이라서

따로 npm install 해 줄 필요없다. 

 

15KB나 차이가 난다

 

 


나머지 소스는 이전 포스팅에 나와있음

https://tomhoon.tistory.com/662

 

Webpack - ecmascript 최신 내용 적용 안될 때 babel을 추가하여 빌드하기

ECMAScript는 계속해서 업데이트 된다. browser는 업데이트된 속도를 따라가지 못한다. 개발자들은 기다릴 필요 없이 새로나온 ECMAScript 기능을 old 버전으로 바꿔주면 된다. 바꿔주는 녀석이 babel이

tomhoon.tistory.com

 

 

1. webpack.config.js plugins 추가

 

terser-webpack-plugin 는 webpack5부터 내장된 plugin이라서

따로 npm install 해 줄 필요없다. 

 

 

// can't use ecma script module. use only common.js
console.log("module >>> ", module);
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

// minimum option
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        /**
         * publicPath
         * under version 4: publicPath is empty('').
         * over version 4: publicPath is auto
         * 
         * can use list
         *      1. 'dist/'
         *      2. 'https://image.oliveyoung.co.kr/uploads/contents/202410/25oyDay/pc_visual.jpg'
         */
        publicPath: 'dist/'
    },
    mode: 'none',
    module: {
        /**
         * webpack: I don't know what that menas 'import Kiwi...'
         * me: thank you for asking, If you don't know somethig, you should check out the rules.
         * webpack: perfect
         */
        rules: [
            {
                test: /\.(png|jpg)$/,
                /**
                 * asset/inline  :bake image into base64. could be larger file size(more better)
                 * asset/resource: request image each of them. cost of call is larger
                 */
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 3 * 1024 // 3kilobyte
                    }
                }
            },
            {
                test: /\.txt$/,
                type: 'asset/source'
            },
            {
                // loader should be installed explicitly
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                // webpack invoke right to left in array
                // 
                use: [
                    'style-loader', 'css-loader', 'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/env'],// ecmascript 8,7,6,5 make down version
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }
        ],
    },
    plugins: [
        new TerserPlugin()
    ]
}

 

 


2. npm run build 하기