Найти в Дзене
Webpack, Vite и прочие frontend инструменты

Webpack, Vite и прочие frontend инструменты

Материалы про различные frontend инструменты.
подборка · 5 материалов
288 читали · 1 год назад
Разделение кода (на чанки) в Webpack
Не так давно я писал зачем нужно разделять код на чанки, а теперь давайте рассмотрим некоторые нюансы настройки Webpack, связанные с этим вопросом. Для начала, создадим папку src и добавим туда три файла, index.js и два других (предположим foo.js и baz.js), динамически импортируемых в первый. Затем добавим минимальный файл конфигурации: // webpack.config.js module.exports = { entry: './src/index.js', output: { // про contenthash как нибудь в другой раз filename: '[name].[contenthash].js', }, }; Кстати, когда речь идёт о долгосрочном проекте, рекомендую всегда самим настраивать сборку, а не использовать готовые решения...
239 читали · 1 год назад
Про разделение JavaScript кода (на чанки)
Начать нужно с того, что весь (frontend) код который мы пишем, в конечном итоге загружается пользователями. Помимо самой загрузки, браузеру нужно этот код прочитать, проанализировать и выполнить. На всё это, как ни странно, нужно время, и чем больше этого кода, тем больше времени будут занимать все эти процессы. Стоит сделать важное замечание: даже если нужно выполнить какую-то небольшую часть кода, загрузить и проанализировать браузер его должен полностью. Предположим у нас есть веб-приложение с 10 страницами, из которых пользователи используют обычно 2-3, а к остальным обращаются редко, а то и вообще никогда...
Экспериментальная оптимизация Webpack
Как сократить время локального запуска проекта, например, с 16 до 1 секунды? Если вы используете Webpack 5.17+, можно отложить сборку конкретного кода (чанка) до момента пока он не понадобится: experiments: { // true должно быть только при локальном запуске lazyCompilation: true, }, В итоге, чем лучше код разделён на чанки, тем меньше времени придётся ждать...
Пара нюансов в вопросе Webpack vs Vite
На первый взгляд может показаться что одно можно легко заменить на другое, ну или как минимум не трогать код проекта, но это не так. Я столкнулся с двумя моментами, но скорее всего их больше. 1. Обработка ошибок загрузки (не существующих) чанков Если ваша сборка подразумевает что имена чанков между сборками могут отличаться, в хэш части, то хорошей практикой будет добавить обработку ошибки загрузки не существующих файлов. Webpack, в данном случае, возвращает специализированные ошибки: Для JS: error.name = ChunkLoadError Для CSS: error.code = CSS_CHUNK_LOAD_FAILED Vite же, для js вернёт обычную...
Как ускорить Webpack сборку проекта на Typescript с 42 до 16 секунд
При переходе на очередной проект, столкнулся с тем, что его локальный запуск происходит не быстро. Репозиторий не сказать бы что большой, поэтому 42 секунды (mac air m1 2020) для него многовато. Итак, вот один из примеров, что можно попробовать сделать в подобном случае: Для начала, нужно понять на что именно уходит это время. Для любого инструмента сборки есть или встроенные средства, или стороннее расширение. В нашем случае, это speed-measure-webpack-plugin. Устанавливаем, оборачиваем им наш конфиг сборки, запускаем и видим следующее: General output time took 42.15 secs eslint-webpack-plugin took 21...