프론트엔드 성능 최적화 - 2. 소스코드 최적화

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다.

https://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html

 

어플리케이션의 로딩 속도를 줄이는 가장 직관적인 방법은 HTML, CSS, Javascript 코드 사이즈 자체를 줄이는 것입니다. 그냥 코드를 짧게 작성하는 당연한(?) 방법도 있겠지만 일반적으로 웹팩 플러그인 설정을 통해 빌드 결과물이 기존 소스코드보다 용량이 적어지게 하는 방법을 사용할 수 있습니다.

 

HTML 파일 축소

 

npm install --save-dev html-webpack-plugin
or
yarn add -D html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

 

HTML 파일의 내용을 간소화하기 위해서 html-webpack-plugin 을 사용할 수 있습니다. 이 플러그인의 minify 옵션을 설정하면 html 상의 공백, 주석 등 서비스에 필요없는 코드들을 삭제할 수 있습니다.

 

 

CSS 파일 분리 & 파일 축소

 

npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin
or
yarn add -D mini-css-extract-plugin optimize-css-assets-webpack-plugin

const MiniCSSExtractionPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

 

 

브라우저가 처음 HTML 을 얻어내고 이를 파싱하면서 CSS 파일에 대한 Load 는 없이 CSS 내용까지 포함된 bundle 자바스크립트 파일 하나만을 Load 하도록 만들 수 있지만 이는 Load 가 완료되는 시점을 앞당기고자 할때는 비효율적인 방식입니다. 이보다는 브라우저가 CSS 파일과 JS 파일을 병렬적으로 동시에 다운로드 받도록 만드는 것이 낫습니다. (평균적으로 6개의 요청을 브라우저는 병렬적으로 보낼 수 있습니다.)

 

이를 위해 많이 사용되는 style-loader 를 사용하는 대신 적어도 production 용 배포에서는 MiniCSSExtractionPlugin 플러그인을 사용하도록 설정하는 것이 좋습니다. 이를 이용하면 CSS 코드를 한데 모아놓은 파일이 생성되고 빌드된 HTML 파일의 head 태그안에서 불러오도록 설정할 수 있습니다.

 

하지만 이 플러그인까지만 사용하면 CSS 파일이 분리되어 형성될 뿐 따로 '압축된' 형태로 생성되지 않습니다. CSS 내부의 불필요한 공백이나 주석 등을 지우려면 webpack 의 optimization 속성에서 OptimizeCSSAssetsPlugin 을 사용하도록 설정해주어야 합니다.

 

 

Javascript 파일 축소

 

npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin
or
yarn add -D mini-css-extract-plugin optimize-css-assets-webpack-plugin

// webpack 실행 명령어
webpack --mode=production --node-env=production

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

const PRODUCTION = 'production';
const DEVELOPMENT = 'development';

const mode = process.env.NODE_ENV || DEVELOPMENT; // 빌드할 때는 process.env.NODE_ENV 를 production 으로 설정해서 실행하세요

 

웹팩은 mode 가 'production' 으로 설정되어 있다면 다음의 플러그인들을 기본으로 적용시킵니다.

 

• FlagDependencyUsagePlugin
• FlagIncludedChunksPlugin
• ModuleConcatenationPlugin
• NoEmitOnErrorsPlugin
• OccurrenceOrderPlugin
• SideEffectsFlagPlugin
• TerserPlugin

 

그렇기에 mode 를 'production' 로 설정하는 것만으로도 자바스크립트 코드의 압축이 이루어지는 것을 확인할 수 있습니다.

 

 

 

추가적으로 자바스크립트 번들을 난독화시킬 수 있습니다. 사이즈 자체에는 큰 영향을 주지 않지만 더 안전하게 번들을 제공하는 방법이므로 사용하는 것이 좋습니다. 적용 방법은 간단합니다. 난독화를 위해 사용되는 Webpack의 Terser 플러그인을 optimization 에 적용시키면 됩니다.