victordesyatkin / toxin

the simple sample
0 stars 0 forks source link

Webpack #1

Closed Yubil-Olga closed 3 years ago

Yubil-Olga commented 3 years ago

Сделай один entry и в нем пропиши функцию для импорта всех необходимых файлов стилей, чтобы не делать это отдельно на каждом компоненте.

victordesyatkin commented 3 years ago

Можно сделать одну точку входа ./src/index.js с общим импортом

function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
requireAll(require.context('./', true, /\.(js|scss|jpg|png|svg|webmanifest|ico|xml)$/));

Тогда мы будем получать для любой страницы один файл index.js и один index.css, и тогда каждая страница будет получать лишние скрипты и лишние стили (которые ей совсем не нужны). Например colors-and-type.css весит 30Kb, colors-and-type.js 168Kb, а search-room-filter-preferences-dropdown.css 62 Kb, search-room-filter-preferences-dropdown.js 370 Kb. А с одной точкой входа каждая траница будет всегда получать например index.js который весит более чем 398 Kb. При этом страница Сolors & type обязательно получит например и скрипты и стили для air-datepicker, а они там совсем не нужены. Но если правильнее сделать одну точку и не подключать отдельно стили, то конечно же сделаю как правильнее.

OlgaYubil commented 3 years ago

Одну точку входа будет проще поддерживать. Конечно можно оставить и несколько, но в любом случае следует настроить автоматический импорт файлов (require.context). Сейчас кстати сборка делает очень много лишних файлов, зачем например нужно собирать demo-base?

OlgaYubil commented 3 years ago

Можно закрыть