반응형 code splitting2 17. 환경별 설정 (Development, Production) - 3 Webpack의 최적화와 압축 웹팩은 프로젝트를 번들링하고 모듈을 관리하는 강력한 도구이지만, 더 나은 성능을 위해서는 번들된 코드를 최적화하고 압축해야 합니다. 이 글에서는 웹팩을 사용하여 프로젝트를 최적화하고 압축하는 방법에 대해 살펴보겠습니다. 1. Tree Shaking Tree Shaking은 사용되지 않는 코드를 제거하여 번들 크기를 최소화하는 기술입니다. 주로 ES6 모듈 시스템에서 사용되며, 웹팩 설정에서 다음과 같이 활성화할 수 있습니다. // webpack.config.js module.exports = (env, argv) => { return { // ... 다른 설정 optimization: { usedExports: true, }, }; }; 2. 코드 압축 웹팩은 UglifyJ.. 2023. 12. 25. 12. 효율적인 코드 분할 - 1 코드 분할의 개념 코드 분할(Code Splitting)은 대규모 웹 애플리케이션에서 번들 크기를 줄이고 초기 로딩 속도를 개선하기 위한 기술입니다. Webpack은 코드 분할을 지원하여 애플리케이션을 더 효율적으로 관리할 수 있게 도와줍니다. 1. 코드 분할이란? 대부분의 웹 애플리케이션은 여러 페이지와 모듈로 구성되어 있습니다. 코드 분할은 애플리케이션의 여러 부분을 별도의 청크(chunk)로 나누어 각 페이지 또는 기능이 필요로 할 때 동적으로 불러오도록 하는 것을 의미합니다. 2. 코드 분할의 장점 2.1. 초기 로딩 속도 개선 큰 번들을 한 번에 로딩하는 것은 초기 로딩 속도를 늦출 수 있습니다. 코드 분할을 통해 필요한 부분만 로딩하므로 초기 로딩이 빨라집니다. 2.2. 사용자 경험 향상 페이.. 2023. 12. 24. 이전 1 다음 반응형
