번들 파일 용량 문제

[yayongi]

현재 운영용으로 배포시, 파일 용량이 10MB가 넘는 문제가 있음.

분리되어 있지 않은 번들파일은 웹 라이브러리와 컴포넌트의 묶음으로 최초 화면 진입 시, 사용하지 않더라도 모두 포함하여 로딩할 수밖에서 없음.

관련 이슈를 해결하기 위해 Code-Splitting 이라는 기술을 적용할 예정임.

Code-Splitting은 Dynamic import 기능을 이용하여 컴포넌트 로딩이 필요한 시점에 관련 번들을 Chunk 형태로 다운로드 받아서 사용하는 개념임. (Webpack에서 번들 파일 생성 시, 알아서 분리해준다고 함.)

Router URL별로 호출되는 컴포넌트가 분리되어 있으므로 번들 파일이 각 메뉴별로 생성되고, 화면 전환이 일어나는 시점에 필요한 번들 파일만 다운로드 받아서 사용하므로 최초 로딩 지연을 방지할 수 있음.

실제 적용해보고 얼마큼의 절감효과가 있는지 확인해볼 예정

[yayongi]

before : // import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';

after : const MainLayout = lazy(() => import('layouts/Main')); const MinimalLayout = lazy(() => import('layouts/Minimal'));

[yayongi]

webpack.config.js 수정 **1. mode : developmen -> production 으로 변경(16MB -> 10.7MB 로 감소)

2. entry에 vendor 항목 제거(10MB -> 4.96MB로 감소) (intranet, vendor로 번들 파일이 나뉠때 모듈이 중복해서 포함되는 점 개선) entry: { intranet: './'+appRootPath+'/index.js', / vendor: [ // require.resolve('./polyfills'), 'react', 'react-dom', 'react-router-dom', 'moment', 'lodash' ]/ }, 3. devtool 항목 수정(4.96MB -> 1.66MB로 감소)** before : devtool: 'inline-source-map', after : devtool: '',

[yayongi]

4. splitChunks 를 이용하여 번들 분리하는 작업 수행 (용량의 차이는 없으나 모듈과 App을 분리하고 추후 필요한 컴포넌트만 로딩되도록 intranet.bundle.js를 분리해볼 예정) vendors.chunk.js intranet.bundle.js

5. compression-webpack-plugin 를 이용한 번들 파일 압축 (1.66 MB -> 347KB 로 감소) ==> 압축은 성공했는데;; 실제 적용하는 방법은 자료 조사가 필요 vendors.chunk.js.br (1.44MiB -> 316 KiB) intranet.chunk.js.br (231KiB -> 37 KiB)

[yayongi]

6. Dynamic import를 사용한 경우, 분리하는 작업 splitChunks 의 async를 이용하면 될 거 같음. ==> 자료 조사 밑 테스트가 필요함.

[yayongi]

7. 5번 코멘트 고민에 대한 연장... Apache 설정에서 미리 압축되어 있는 gz 파일을 읽을 수 있도록 설정 변경 httpd.conf 파일을 수정

• 아래 내용 주석 AddType application/x-compress .Z AddType application/x-gzip .gz .tgz
• 아래 내용 주석 해제 AddEncoding x-compress .Z AddEncoding x-gzip .gz .tgz

==> home.jsp에 압축된 번들 파일 경로 지정

Load Time : 700 ~ 900ms -> 400 ~ 500ms 개선)