WEBPACK- Ускоряем загрузку JS в 3-4 раза. Code Splitting и vendors.js

Введи промокод "Webpack" и получи жирную скидку :)

--------

► Группа вк, где я публикую различные новости:

--------
🚀 Благодаря вашей поддержке, выходят новые видео:
--------

--------
💬 Вопросы по видео, задавайте в комментах, а поболтать можем в группах:

Ссылки из видео:

[StasNemy]

Благодарю, с Vue и Vuex не сталкивался, было интересно!

[prdrfzq]

На 18.30 упомянули о разбиении большого вендорного файла на чанки и их асинхронной загрузке. Хотелось бы узнать подробнее как это делать. Спасибо!

[blackmind]

Лучше использовать для js и css в данном случае разные значения хэширования:
js - [hash], для css - [contenthash].
Так мы не будем заставлять клиент грузить заново и js, и css, если изменится только один из них

[Vasya]

За Webpack ОГРОМНОЕ спасибо! ))) Давай серию по docker )))

[staticcheese]

Хотел еще добавить, если сделать изменения(находясь в --mode development), например в common.js, то эти изменения повлекут изменения хешей у всех трех файлов из dist/
app.3a7d08....css
app.3a7d08....js
vendor.3a7d08....js
Кстати, при builde все три файла также генерируется с одинаковыми хэшами.

Все это сказано к теме оптимизации JS, т.е. загрузки пользователем только действительно измененных модулей,
так как ему нет необходимости снова подгружать в браузер то, что и так уже лежит в кэше.
Но в текущей сборке получается, что если изменить common.js или даже какой-либо scss/modules/block.scss, хеши изменятся у всех.
Решить проблему удалось используя [chunkhash] вместо [hash], а для css [contenthash]
Инфа отсюда:

Timestamp:

[crybaby]

Очень классный материал, спасибо за видео, не подскажешь как вебпаку собираться без перезагрузки страницы, учитывая твою сборку!!

[fedortregubov]

В дополнение к хешам (из скринкаста Ильи Кантора). Хеш лучше всего добавлять непосредственно к имени файла [name].[hash].js, но не как GET-параметр [name].js?v=[hash] т.к. не все CDN правильно воспринимают файлы с GET-параметрами.

[denfgnf]

Jack, а посредством чего твой форум (там где статьи) запоминает мой выбор темной темы (кнопка в левом нижнем углу)? Web storage?

[stayacid]

Для webpack рекомендуют использовать vue/dist/vue.esm.js, там tree-shaking есть для удаления из билда неиспользуемого кода. Я попробовал и действительно несколько килобайт сэкономило

[rqrxcpi]

А можно ли таким же образом разделить на app и vendors стили??
Например, вынести в вендоры какие-то библиотеки стилей или фреймворки типа Bootstrap.

[alexandrnasonov]

А через ejs можно в html импортировать другие html файлы?
т.е разбивать на header/content/footer, как например в blade шаблонизаторе

[vedegis]

Когда я подключаю реакт он попадает в vendors.js, а то что я пишу из компонентов идет в файл app.js?
А понял! Реакт использую 16 версии, а каждый билд это изменения в компонентах. Тогда vendors действительно не меняется, а лишь по новой подгружается app.js. Круто!!!

[espocada_official]

если используешь create-react-app, надо оптимизировать таким образом или там уже все настроено?

[fzfecni]

Всё круто, а можно сообщить что Vue, это фреймворк? Либо ты смотришь с экосистемы Webpack?)

[ykifkue]

Следуя вашему видео я разделил файлы на vendor.111mysuperhash.js и app.111mysuperhash.js например. Далее я делаю изменение в app.js и запускаю билд проекта. Далее я ожидаю что будет изменен hash только у app.js, но в действительно хэш поменяется и у vendor.js. Это странно. Ведь в начале видео вы говорили, что юзеру не имеет смысл догружать vendor.js т.к. он не менялся, а меняется только app.js

[Athlonplus]

Искал как в webpack 4 сделать несколько точек входа, чтобы не грузуть ЛК на пасадочной странице. И тут не нашел. Автор показал как подключить ЛК на главную, а как подключить к host:port/lk (условно) не поеазал 🙁

[LordWelheor]

Такой вопрос, насколько критично использовать [contenthash]? Удобная же вещь, обновляет хэш только у тех файлов что изменились

[ygnhekw]

Можете показать как вебпак может разбить пользовательский js-файл в котором есть импорт другого пользовательского js-файла чтобы он их не объединял воедино под именем того файла в котором производится импорт???

[ksawl]

странно что до сих пор не стоит clean-webpack-plugin и dist надо чистить руками))

[surho]

Вот не ясно зачем делили конфиги, если по сути все прописали тупо в base, еще не ясно зачем после MiniCssExtractPlugin идет style-loader. Вроде все хорошо, но обьяснения зачем и что нужно местами просто настолько скомканы, не хватает именно глубокого понимания что зачем, все по верхам. В любом случае спасибо за труд