최적화 - 웹팩 심화편 | 김정환
[출처 : https://jeonghwan-kim.github.io]
4. 최적화
코드가 많아지면 번들링된 결과물도 커지기 마련이다. 거의 메가바이트 단위로 커질수도 있는데 브라우져 성능에 영향을 줄 수 있다. 파일을 다운로드하는데 시간이 많이 걸리기 때문이다. 이번 섹션에서는 번들링한 결과물을 어떻게 최적화 할수 있는지 몇가지 방법에 대해 알아보겠다.
4-1. production 모드
웹팩에 내장되어 있는 최적화 방법중 mode 값을 설정하는 방식이 가장 기본이다. 세 가지 값이 올 수 있는데 지금까지 설정한 “development”는 디버깅 편의를 위해 아래 두 개 플러그인을 사용한다.
· NamedChunksPlugin
· NamedModulesPlugin
DefinePlugin을 사용한다면 process.env.NODE_ENV 값이 “development”로 설정되어 어플리케이션에 전역변수로 주입된다.
반면 mode를 “production”으로 설정하면 자바스크립트 결과물을 최소화 하기 위해 다음 일곱 개 플러그인을 사용한다.
· FlagDependencyUsagePlugin
· FlagIncludedChunksPlugin
· ModuleConcatenationPlugin
· NoEmitOnErrorsPlugin
· OccurrenceOrderPlugin
· SideEffectsFlagPlugin
· TerserPlugin
DefinePlugin을 사용한다면 process.env.NODE_ENV 값이 “production” 으로 설정되어 어플리케이션 전역변수로 들어간다.
그럼 환경변수 NODE_ENV 값에 따라 모드를 설정하도록 웹팩 설정 코드를 다음과 같이 추가할 수 있겠다.
webpack.config.js :
const mode = process.env.NODE_ENV || 'development'; // 기본값을 development로 설정
module.exports = {
mode,
}* key와 value의 값이 같으면 key만 입력해도 된다. (ES6 문법)
빌드 시에 이를 운영 모드로 설정하여 실행하도록 npm 스크립트를 추가한다.
package.json :
{
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --progress"
}
}* "'NODE_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다." 에러 발생 시
$ npm install -g win-node-env node-env를 설치
start는 개발 서버를 구동하기 때문에 환경변수를 설정하지 않고 기본값 development를 사용할 것이다. 배포용으로 만들 build는 환경변수를 production으로 설정했고 웹팩 mode에 설정된다.
빌드한 뒤 결과물을 확인해 보자.
$ npm run build
왼쪽에 development로 설정해서 빌드한 결과물과 비교해 보면 오른쪽에 production으로 빌드한 결과물의 확연한 차이를 볼 수 있다.
4-2. optimazation 속성으로 최적화
빌드 과정을 커스터마지징할 수 있는 여지를 제공하는데 그것이 바로 optimazation 속성이다.
HtmlWebpackPlugin이 html 파일을 압축한것 처럼 css 파일도 빈칸을 없애는 압축을 하려면 어떻게 해야할까? optimize-css-assets-webpack-plugin이 바로 그것이다.
플러그인을 다운로드 하고,
$ npm i -D optimize-css-assets-webpack-plugin
웹팩 설정을 추가한다.
webpack.config.js :
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: mode === 'production' ? [
new OptimizeCSSAssetsPlugin(),
] : [],
},
}optimization.minimizer는 웹팩이 결과물을 압축할때 사용할 플러그인을 넣는 배열이다. 설치한 OptimizeCSSAssetsPlugin을 전달해서 빌드 결과물중 css 파일을 압축하도록 했다.
빌드하뒤 확인하면 css 파일도 압축되었다.
mode=production일 경우 사용되는 TerserWebpackPlugin은 자바스크립트 코드를 난독화하고 debugger 구문을 제거한다. 기본 설정 외에도 콘솔 로그를 제거하는 옵션도 있는데 배포 버전에는 로그를 감추는 것이 좋을 수도 있기 때문이다.
이 플러그인을 설치한 뒤,
$ npm i -D terser-webpack-plugin
optionmization.minimizer 배열에 추가한다.
webpack.config.js :
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: mode === 'production' ? [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 콘솔 로그를 제거한다
}
}
}),
] : [],
},
}
4-3. 코드 스플리팅
코드를 압축하는 것 외에도 아예 결과물을 여러개로 쪼개면 좀 더 브라우져 다운로드 속도를 높일 수 있다. 큰 파일 하나를 다운로드 하는것 보다 작은 파일 여러개를 동시에 다운로드하는 것이 더 빠르기 때문이다.
가장 단순한 것은 엔트리를 여러개로 분리하는 것이다.
webpack.config.js :
module.exports = {
entry: {
main: "./src/app.js",
form: "./src/form.js",
}
}빌드하면 엔트리가 두 개 생성되고 물론 하나의 엔트이일 때보다 용량이 조금 줄었다.
dist 폴더 내의 파일 목록을 보면,
$ ls -lh dist
모듈을 어떻게 분리하는냐에 따라 이 결과물의 크기를 조절할 수 있는데 지금은 거의 변화가 없다. HtmlWebpackPlugin에 의해 html 코드에소 두 파일을 로딩하는 코드도 추가된다.
하지만 두 파일을 비교해 보면 중복코드가 있다.
axios 모듈인데 main, form 둘 다 axios를 사용하기 때문이다.
SplitChunksPlugin은 코드를 분리할때 중복을 예방하는 플러그인이다.
optization.splitChucks 속성을 설정하는 방식이다.
webpack.config.js :
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
}다시 빌드해보자.
$ npm run build
main.js, form.js외에도 vendors~form~main.js 파일도 생겼다. 마지막 파일은 두 엔트리의 중복 코드를 담은 파일이다. axios로 검색하면 main.js와 form.js에서는 없고 vendors~form~main.js에만 있다.
이런 방식은 엔트리 포인트를 적절히 분리해야기 때문에 손이 많이 가는 편이다. 반면 자동으로 변경해 주는 방식이 있는데 이를 다이나믹 임포트라고 부른다.
기존 컨트롤러 코드를 보면 이렇다.
/src/app.js :
import form from './form';
document.addEventListener('DOMContentLoaded', () => {
formEl = document.createElement("div");
formEl.innerHTML = form.render();
document.body.appendChild(formEl);
})
import/from으로 컨트롤러 모듈을 가져와서 사용했다.
이를 동적으로 임포트하려면 다음처럼 변경한다.
//import form from "./form";
document.addEventListener("DOMContentLoaded", async () => {
import(/* webpackChunkName: "form" */ "./form.js").then(m => {
const form = m.default;
formEl = document.createElement("div");
formEl.innerHTML = form.render();
document.body.appendChild(formEl);
})
})import() 함수로 가져올 컨트롤러 모듈 경로를 전달하는데 주석으로 webpackHunkName: “form”를 전달했다. 이것은 웹펙이 이 파일을 처리할때 청크로 분리하는데 그 청그 이름을 설정한 것이다.
그리고 나서 프라미스를 상수 form에 담아서 모듈을 가져와 사용하였다.
변경한 웹팩 설정 파일도 다시 복구해야 한다. 엔트리 포인트를 다시 main만 남겨두고 optimization에 설정한 SplitChunksPlugin 옵션도 제거한다.
webpack.config.js :
module.exports = {
entry: {
main: "./src/app.js",
// controller: "./src/controller.js", // 분리한 엔트리 포인트 제거
},
optimization: {
// splitChunks: { // SplitChunksPlugin 옵션 제거
// chunks: 'all',
// },
},
}
빌드하면 자동으로 파일이 분리되었다.
다이나믹 임포트로 모듈을 가져오면 단일 엔트리를 유지하면서 코드를 분리할 수 있다.
엔트리를 분리하지 않아도 form와 app의 중복코드를 vendors~form.js 파일로 분리한다.
4-4. externals
조금만 더 생각해 보면 최적화해 볼 수 있는 부분이 있다. 바로 axios같은 써드파티 라이브러리다. 패키지로 제공될때 이미 빌드 과정을 거쳤기 때문에 빌드 프로세스에서 제외하는 것이 좋다.
웹팩 설정중 externals가 바로 이러한 기능을 제공한다.
webpack.config.js :
module.exports = {
externals: {
axios: 'axios',
},
}externals에 추가하면 웹팩은 코드에서 axios를 사용하더라도 번들에 포함하지 않고 빌드한다. 대신 이를 전역 변수로 접근하도록하는데 키로 설정한 axios가 그 이름이다.
axios는 이미 node_modules에 위치해 있기 때문에 이를 웹팩 아웃풋 폴더에 옮기고 index.html에서 로딩해야한다.
파일을 복사하는 CopyWebpackPlugin을 설치한다.
$ npm i -D copy-webpack-plugin
플러그인을 사용해서 라이브러리를 복사한다.
webpack.config.js :
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{
from: './node_modules/axios/dist/axios.min.js',
to: './axios.min.js' // 목적지 파일에 들어간다
}
]
})
]
}마지막으로 index.html에서는 axios를 로딩하는 코드를 추가한다.
src/index.html :
<script type="text/javascript" src="axios.min.js"></script>
</body>
</html>axios는 이렇게 직접 추가했지만 번들링한 결과물은 htmlwebpacPlugin이 주입해 주는 것을 잊지말자.
다시 빌드해 보면,
axios는 빌드하지 않고 복사만 한다. form와 main이 분리되었다. 이전에는 공통의 코드인 axios가 vender~.js로 분리되었는데 지금은 파일조차 없다. 만약 써드파티 라이브러리 외에 공통의 코드가 있다면 이 파일로 분리되었을 것이다.
이렇게 써드파티 라이브러리를 externals로 분리하면 용량이 감소뿐만 아니라 빌드시간도 줄어들고 덩달아 개발 환경도 가벼워질 수 있다.
SUMMARY
웹팩 사용방법에 대해 좀더 알아 보았다.
개발 서버를 띄워 파일 감지, api 서버 연동 등 개발 환경을 좀 더 편리하게 구성할 수 있었다. 특히 핫 모듈 리플레이스먼트는 일부 모듈의 변경만 감지하여 페이지 갱신 없이 변경사항을 브라우져에 렌더링할 수 있다.
웹팩 최적화 방법에 대해서도 알아보았다. mode 옵션을 production으로 설정하면 웹팩 내장 플러그인이 프로덕션 모드로 동작한다. 번들링 결과물 크기가 커지면 브라우져에서 다운로딩하는 성능이 떨어질수 있는데 코드 스플리트 기법을 사용해서 해결할 수 있다. 써드파티 라이브러리는 externals로 옮겨 빌드 과정에서 제외할수 있다.
TODO 1.
환경변수 NODE_ENV에 따라 development나 production 값을 설정하세요
webpack.config.js :
const mode = process.env.NODE_ENV || "development";
module.exports = {
mode,
}TODO 2.
최적화 설정을 구성하세요
$ npm i optimize-css-assets-webpack-plugin
$ npm i terser-webpack-plugin
webpack.config.js :
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: mode === 'production'
? [
new OptimizeCssAssetsPlugin(),
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // console.log()를 제거한다.
},
},
}),
]
: [],
},
}pakage.json :
{
"scripts": {
"build": "NODE_ENV=production webpack --progress",
},
}TODO 3.
외부 라이브러리 axios를 로딩할수 있도록 웹팩에서 파일을 복사하세요
$ npm i copy-webpack-plugin
webpack.config.js :
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
externals: {
axios: "axios",
},
plugins: [
new CopyPlugin({
patterns: [
{
from: './node_modules/axios/dist/axios.min.js',
to: './axios.min.js'
}
]
})
]
}