Webpack4 DllPlugin Configuration

본 포스팅에서는 DllPlugin이 무엇인지, 어떻게 동작하는지, 그리고 어떻게 설정해야 하는지를 다루고, Webpack4의 zero-configuration라는 캐치프라이즈는 역시 거짓부렁이었다는 것을 증명한다.


DLL

Dynamic Link Library. 윈도우 프로그램을 설치한 뒤에 보이는 .dll 확장자처럼 외부 라이브러리들을 미리 Compile 해놓는 기법이다. 프로젝트에서 파일을 갱신할 때 마다 Webpack이 번들링하는 범위를 줄일 수 있다는 첫 번째 장점, 그리고 프로덕션 환경에서 라이브러리 스택이 변경되지 않은 경우에 재방문하는 유저는 라이브러리에 해당하는 dll.js를 캐싱해서 가져올 수 있다는 두 번째 장점이 있다.

이 쪽 설정이 꽤나 번거로워서 Webpack3까지 지원하는 autodll-webpack-plugin이라는 플러그인도 있었지만, 2018년 5월 10일 기준으로 Webpack4 지원 업데이트가 되고 있지 않다. 이전에 확인했을 때는 아조씨 Github에 autodll-webpack-plugin-webpack-4 repo가 있었는데, 현재는 내려갔군. 저 플러그인을 썼다가 계속 ENOENT 에러로 결국 공식 플러그인을 쓰기로 결정했다. (그리고, 아마 이 포스트가 발행되고 나면 Webpack4 지원이 마무리될 것 같다. 관련링크)


DllPlugin / DllReferencePlugin의 차이점

Webpack에서 dll의 개념을 적용하려면 두 가지 Webpack 플러그인을 사용해야한다. 아니, 조금 더 정확히 말해서! 기존에 있던 webpack.config.js 에서는 DllReferencePlugin을 사용하고, 새로운 vendor.webpack.config.js 파일1을 만들어서 dll 번들링만을 수행하는 Webpack 설정파일을 만들어야한다.

vendor.webpack.config.js 설정 내부에서 DllPlugin을 사용하여 Webpack을 돌리면 Minified Javascript Code와 관련된 manifest.json 파일이 생성된다. 이후에 본 프로젝트의 webpack.conf.js에서 라이브러리를 import할 때 dll에 존재하는 패키지면, app.js에 import 하려는 라이브러리를 넣지 않고 dll 파일에서 가져다가 사용하는 개념이다. 코드는 이미 minified 되었으니 그 코드 속에 어떤 npm package가 들어가있는지를 기술하는 파일이 곧 manifest.json이다.


실제 적용

  • 용어 정리
    • 본 프로젝트에서 사용하는 Webpack config file: webpack.config.jsdll을 위한 Webpack config file: vendor.webpack.config.js

webpack —mode production —config vendor.webpack.config.js 를 실행시키면, dll 폴더가 생성되고 그 안에 polyfill.12345hash.dll.js, polyfill.json, vendor.12345hash.dll.js, vendor.json 파일이 생성된다. 이 dll파일들을 index.html의 body 마지막 부분에서 <script> 태그를 이용해서 불러온다. 개인적으로 polyfill은 따로 분리하는 것을 선호해서 이렇게 설정.


본 프로젝트의 설정파일의 pluginsDllReferencePlugin 으로 dll의 json을 참조하면 Webpack 설정은 끝이다.


이제 package.json에서,
“dll”: “webpack —mode production —config vendor.webpack.config.js”,
“predll”: “rm-rf dll”,
“postdll”: “…dll 결과를 index.html에 넣어주는 간단한 스크립트…”,

정도를 넣어주고.

“build”: “webpack —mode production”,
“prebuild”: “rm -rf ./dist”,
“postbuild”: “cp -r dll dist”,

를 넣어줘서…

yarn dll로 dll을 B9CC;들고, yarn build로 production 디플로이 코드를 생성하면 된다.


1 파일명은 상관없다.

Leave a Reply