3 min to read

Lodash 크기 줄이기

사용하는 Lodash 메서드만 남기자

Featured image

Lodash 트리 쉐이킹하기

Webapack이 번들 프로세스 중에 사용되지 않은 코드를 제거하는 것 트리 쉐이킹(Tree-shaking)이라고 한다.

vue-cli로 개발을 하면서 Lodash를 가끔 사용하는데, 사용하는 메서드에 비해 용량이 많은 부분을 차지한다. 그래서 내가 사용하는 메서드만 추려서 사용하고 있었다.

import { cloneDeep } from 'lodash'

그러나 내 예상과 달리 BundleAnalyzerPlugin을 사용해서 확인한 결과 lodash가 통채로 들어가 있었다!!

통채로 들어간 lodash

비록 압축된 크기는 70.84kb이지만 쓰지 않는 메서들까지 포함되는 것은 비효율적이다. 그런데 왜 이런 문제가 발생했을까?

Lodash가 트리 쉐이킹 되지 않는 이유

일단 lodash는 CommonJS 형태로 번들링 되어 배포가 된다고 한다. 그리고 babel은 기본적으로 ES6 모듈(import/export) 대상으로 commonJS 형태로 변환을 해준다.

import lodash from 'lodash';
// => var lodash = require('lodash');

import { assign } from 'lodash';
// => var assign = require('lodash').assign;

Webpack은 ES Module로 의존성을 관리하는 모듈만 Tree-Shaking을 한다. 따라서 require 변환된 녀석들은 트리 쉐이킹이 적용이 안되는 것이다. 이를 수정하기 위해선 babel 설정을 추가해줘야했다.

Babel 설정하기

vue-cli는 babel 프리셋으로 @vue/babel-preset-app를 사용하는데 이 안에는 @babel/preset-env가 포함되어 있다. 따라서 babel 설정을 그대로 적용하면 된다. { modules: false }를 추가했다.

//babel.config.js
module.exports = {
  presets: [
      ['@vue/app', { modules: false }]
  ],
  plugins: []
}

modules 옵션은 ES6 모듈 구문을 다른 모듈 타입으로 바꿀 것이냐 인데, false 하여 ES6 모듈 그대로를 사용한다는 뜻이다.

추가로 babel-plugin-lodash을 설치했다. babel-plugin-lodash는 내 코드를 아래와 같이 바꿔준다.

import { cloneDeep } from 'lodash'
// import cloneDeep from 'lodash/cloneDeep'

따라서 이미 import cloneDeep from 'lodash/cloneDeep'형태로 쓰고 있다면 설치할 필요는 없다.

npm i --save-dev babel-plugin-lodash

그러고 난 뒤 bable.config.js를 업데이트 했다.

//babel.config.js
module.exports = {
  presets: [
      ['@vue/app', { modules: false }]
  ],
  plugins: ['lodash']
}

Webpack 설정하기

마지막으로 webpack 설정이 남았다. lodash-webpack-plugin을 설치할 것이다. lodash-webpack-plugin는 사용하지 않는 lodash 코드를 제거해준다.

 npm i --save-dev lodash-webpack-plugin

vue-cli를 사용하므로 vue.config.js파일을 수정해 준다.

// vue.config.js
//...생략...
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

module.exports = {
  //...생략...
  configureWebpack: {
    plugins: [
      new LodashModuleReplacementPlugin({ shorthands: true })
    // ...생략...
    ]
  }
}

해당 플러그인은 옵션 값을 넣어줄 수가 있는데, 나 같은 경우는 Iteratee 관련 에러가 발생하여 해당 코드는 제거하지 않도록 { shorthands: true }를 옵션으로 추가해줬다.

결론

플러그인을 이용한 lodash

처음 통채로 들어간 lodash 압축 크기 70.84kb에서 14.51kb로 크기가 줄은 것을 확인할 수 있었다. 이걸로 조금 삽질을 많이했는데 성공적으로 동작하니 참 뿌듯했다.

참고