🔥 Верстка простого сайта с нуля на Webpack / HTML / SCSS
Разделение кода (на чанки) в Webpack
Не так давно я писал зачем нужно разделять код на чанки, а теперь давайте рассмотрим некоторые нюансы настройки Webpack, связанные с этим вопросом. Для начала, создадим папку src и добавим туда три файла, index.js и два других (предположим foo.js и baz.js), динамически импортируемых в первый. Затем добавим минимальный файл конфигурации: // webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
// про contenthash как нибудь в другой раз
filename: '[name].[contenthash].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...