반응형 코드 분할2 30. 모듈 시스템(Module System) - 3 동적 임포트(Dynamic Import)의 활용과 효과 동적 임포트(Dynamic Import)는 ECMAScript 2020(ES11)에서 도입된 기능으로, 모듈을 동적으로 로드할 수 있게 해줍니다. 이 기능은 애플리케이션의 성능을 향상시키고 코드를 효율적으로 관리할 수 있는 강력한 도구입니다. 이번 글에서는 동적 임포트의 활용과 효과에 대해 알아보겠습니다. 1. 동적 임포트의 활용 동적 임포트는 특히 다음과 같은 상황에서 유용하게 활용될 수 있습니다. 조건부 모듈 로딩 특정 조건이 충족되었을 때 모듈을 로드해야 하는 경우에 동적 임포트를 사용할 수 있습니다. if (condition) { import('./module') .then(module => { // 모듈 사용 }) .catch(error =.. 2024. 2. 17. 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. 이전 1 다음 반응형
