Code-splitting — это фишка, которую поддерживают бандлеры вроде Webpack и Browserify. Она разбивает твоё приложение на несколько бандлов. Эти бандлы могут загружаться динамически во время выполнения вместо того, чтобы быть включёнными в начальный бандл, что снижает время начальной загрузки.
React поддерживает code-splitting через динамическую функцию import(). Это позволяет тебе загружать модули только когда они нужны.
Представь ситуацию: модуль загружается только после действия пользователя.
moduleA.js
const moduleA = 'Hello';
export { moduleA };
App.js
import React, { Component } from 'react';
class App extends Component {
handleClick = () => {
import('./moduleA')
.then(({ moduleA }) => {
// Используй moduleA
})
.catch(err => {
// Обработай ошибку
});
};
render() {
return (
<div>
<button onClick={this.handleClick}>Load</button>
</div>
);
}
}
export default App;
Когда пользователь нажимает кнопку 'Load', moduleA.js и его уникальные зависимости загружаются как отдельный чанк. Этот подход особенно полезен для:
Code-splitting требует, чтобы все модули загружались при запуске приложения, но позволяет выполнять их только при необходимости через lazy evaluation.
Новый — ещё не проверен сообществом
Вы