webpack

[JavaScript] Vanilla JavaScript에 PWA 적용하기 with Webpack, Workbox

Vanilla JavaScript로 구현한 SPA에 PWA를 적용해보았다.     1. 패키지 설치npm i -D webpack-pwa-manifest workbox-webpack-plugin    2. Manifest 설정// webpack.common.jsconst WebpackPwaManifest = require('webpack-pwa-manifest');...plugin: [ ... new WebpackPwaManifest({ name: 'yummy', short_name: 'yummy', description: '맛집 정보 공유 웹앱', background_color: '#ffffff', crossorigin: 'anonymous', dir: 'ltr', ..

[Webpack] Bundle 사이즈 줄이기

Bundle 사이즈를 줄이기 위해 webpack 공식 문서, github 유명 레포지토리 및 다른 사람들의 webpack 코드, 여러 블로그를 찾아보며 webpack 최적화를 적용해 보았다. 내가 적용한 것들을 기록해 본다. 적용한 대상은 Vanilla JavaScript로 구현한 SPA이다.   1. 불필요한 라이브러리, 사용이 적지만 큰 용량을 차지하는 라이브러리 제거webpack-bundle-analyzer를 사용하면 페이지 하단 결과처럼 번들 파일을 분석해 준다. 어떤 요소가 얼마만큼의 크기를 차지하는지 알 수 있다. 이를 통해 불필요한 라이브러리나 사용자 적지만 큰 용량을 차지하는 라이브러리를 제거할 수 있다. 보통 CRA를 사용하면 lodash와 같이 기본으로 설치되는 라이브러리들이 꽤 많은 ..