코드 스플리팅(Code Splitting)

Title

Tags

glossarywebpackterms

Aliases

코드 스플리팅(Code Splitting)

Created

2 years ago

Updated

last year

사용자가 애플리케이션을 로드할 때 초기 경로에 필요한 코드만 보내도록 JavaScript 번들을 분할하는 것.

import moduleA from 'library';

form.addEventListener('submit', (e) => {
	e.preventDefault();
	someFunction();
});

const someFunction = () => {
	// uses moduleA
};

import moduleA from 'library';

form.addEventListener('submit', (e) => {
	e.preventDefault();
	someFunction();
});

const someFunction = () => {
	// uses moduleA
};

동적 가져오기를 사용하여 모듈을 초기 번들에 포함하지 않도록 개선

form.addEventListener('submit', (e) => {
	e.preventDefault();
	import('library.moduleA')
		.then((module) => module.default) // using the default export
		.then(someFunction())
		.catch(handleError());
});

const someFunction = () => {
	// uses moduleA
};

form.addEventListener('submit', (e) => {
	e.preventDefault();
	import('library.moduleA')
		.then((module) => module.default) // using the default export
		.then(someFunction())
		.catch(handleError());
});

const someFunction = () => {
	// uses moduleA
};

코드 스플리팅(Code Splitting)

References #

References