코드 스플리팅은 자바스크립트 애플리케이션의 성능을 향상시키는데 도움이 되는 기술입니다. 이 기술은 애플리케이션을 작은 조각으로 분할하여 필요한 특정 코드만 로드하여 초기 로딩 시간을 줄여줍니다. 이번 블로그 포스트에서는 Gulp를 사용하여 자바스크립트 파일에 코드 스플리팅을 적용하는 방법을 알아보겠습니다.
Gulp란?
Gulp는 자바스크립트 프로젝트의 빌드 프로세스를 자동화하는 도구입니다. Gulp를 사용하면 파일 변경 감지, 컴파일, 번들링 등의 작업을 자동으로 수행할 수 있습니다.
코드 스플리팅을 위한 Gulp 플러그인 설치하기
먼저, Gulp에서 코드 스플리팅을 수행하기 위해 아래와 같은 Gulp 플러그인을 설치해야 합니다.
npm install gulp gulp-uglify gulp-concat gulp-babel gulp-plumber --save-dev
위 명령을 실행하여 gulp, gulp-uglify, gulp-concat, gulp-babel, gulp-plumber 플러그인을 설치합니다.
Gulp 작업 생성하기
Gulp 작업을 생성하기 위해 gulpfile.js 파일을 프로젝트 루트 디렉토리에 생성합니다.
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
gulp.task('scripts', () => {
return gulp.src('src/*.js')
.pipe(plumber())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.series('scripts'));
위의 코드에서 gulp.src('src/*.js')는 src 폴더에서 모든 .js 파일을 선택하도록 설정한 것입니다. 이 부분은 자신의 프로젝트에 맞게 수정해야 합니다.
이제 Gulp 작업을 실행하면 src 폴더에 있는 모든 자바스크립트 파일들이 babel, concat, uglify 플러그인을 거쳐 dist/bundle.js 파일로 변환될 것입니다.
코드 스플리팅 적용하기
코드 스플리팅은 여러개의 번들 파일로 애플리케이션을 분할하는 것을 의미합니다. 이를 구현하기 위해 gulp-concat 플러그인 대신 gulp-rename 플러그인을 사용하여 분할된 파일들을 저장할 폴더를 만들고 파일명을 지정할 수 있습니다.
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
gulp.task('scripts', () => {
return gulp.src('src/*.js')
.pipe(plumber())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rename((path) => {
path.basename += '-bundle';
}))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.series('scripts'));
위의 코드에서는 gulp-rename 플러그인을 사용하여 파일이름을 변경하는 부분이 추가되었습니다. 새로운 파일 이름은 원본 파일 이름에 -bundle을 붙인 형태가 됩니다.
실행시키면 src 폴더에 있는 자바스크립트 파일들이 번들링되어 dist 폴더 안에 여러 개의 파일로 저장될 것입니다.
결론
이번 포스트에서는 Gulp를 사용하여 자바스크립트 파일에 코드 스플리팅을 적용하는 방법을 알아보았습니다. Gulp를 사용하면 프로젝트의 빌드 프로세스를 자동화하여 코드 스플리팅과 같은 성능 향상을 위한 작업을 쉽게 수행할 수 있습니다.