@@tocode Тяжелый урок) Подскажи как полностью заменить gulp? 1 - Создавать сколько угодно html (через pug) 2 - К каждой странице подключать тот js, который нужен
@@biLLie_wiLLie будет видео по использованию вебпака в верстке, оно полностью этот вопрос закроет) 1. Несколько хтмл: продублировать HtmlWebpackPlugin для нового html файла. 2. Разные js: либо убрать хеши и inject и подключать все в ручную (под каждую хтмл страницу) или оставить хеши и пользоваться ejs вытаскивая по имени нужный js файл. Но vendors.js должен быть на всех страницах)
Лучше использовать для js и css в данном случае разные значения хэширования: js - [hash], для css - [contenthash]. Так мы не будем заставлять клиент грузить заново и js, и css, если изменится только один из них
Хотел еще добавить, если сделать изменения(находясь в --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] Инфа отсюда: medium.com/@sahilkkrazy/hash-vs-chunkhash-vs-contenthash-e94d38a32208 Timestamp: ruclips.net/video/eMesm6Ef4VA/видео.html
Достаточно просто вместо [hash] писать [contenthash] и для конфига на прод еще желательно в плагины довабить "clean-webpack-plugin", чтобы при каждом билде на прод старые файлы со старым хешем удалялись. В итоге у каждого файла свой хеш и меняться будет он только у того файла, что меняли + с плагином в папке dist всегда будет только самая свежая версия файлов
В дополнение к хешам (из скринкаста Ильи Кантора). Хеш лучше всего добавлять непосредственно к имени файла [name].[hash].js, но не как GET-параметр [name].js?v=[hash] т.к. не все CDN правильно воспринимают файлы с GET-параметрами.
Для webpack рекомендуют использовать vue/dist/vue.esm.js, там tree-shaking есть для удаления из билда неиспользуемого кода. Я попробовал и действительно несколько килобайт сэкономило
Когда я подключаю реакт он попадает в vendors.js, а то что я пишу из компонентов идет в файл app.js? А понял! Реакт использую 16 версии, а каждый билд это изменения в компонентах. Тогда vendors действительно не меняется, а лишь по новой подгружается app.js. Круто!!!
@@vedegis Все верно! Кстати, вот статья где есть также сплиты для реакта - hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
Следуя вашему видео я разделил файлы на vendor.111mysuperhash.js и app.111mysuperhash.js например. Далее я делаю изменение в app.js и запускаю билд проекта. Далее я ожидаю что будет изменен hash только у app.js, но в действительно хэш поменяется и у vendor.js. Это странно. Ведь в начале видео вы говорили, что юзеру не имеет смысл догружать vendor.js т.к. он не менялся, а меняется только app.js
У меня на текущий момент при любых изменениях в app.js меняется также и вендор тк вебпак и туда и туда проставляет разметку, а вот на пути из других директорий (например, сейчас я работаю с постами - файл postId.js) изменяются лишь текущий файлы и хеши сменяются только у нужных скриптов. хотя иногда я это дело контролирую глобальными переменными
@Raiku По умолчанию, если юзер заходит первый раз на сайт то да - скачиваются оба файла, но в дальнейшем вендорс уже не скачивается, а перекачивается лишь app.js. Плюс в vue/cli добавляет asyc что тоже ускорят подгрузку тк js файлы загружаются асинхронно
@@tocode pug как то не зашел , тем более это лишние трудности для людей в команде кто с ним не знаком я правильно понял кроме "Доки по ejs в хтмл" можно еще использовать это github.com/ampedandwired/html-webpack-plugin#configuration ?
Искал как в webpack 4 сделать несколько точек входа, чтобы не грузуть ЛК на пасадочной странице. И тут не нашел. Автор показал как подключить ЛК на главную, а как подключить к host:port/lk (условно) не поеазал 🙁
Вот не ясно зачем делили конфиги, если по сути все прописали тупо в base, еще не ясно зачем после MiniCssExtractPlugin идет style-loader. Вроде все хорошо ,но обьяснения зачем и что нужно местами просто настолько скомканы , не хватает именно глубокого понимания что зачем, все по верхам. В любом случае спасибо за труд
Можете показать как вебпак может разбить пользовательский js-файл в котором есть импорт другого пользовательского js-файла чтобы он их не объединял воедино под именем того файла в котором производится импорт???
Для меня загадка, я переписал файл index.pug под себя, но все равно как то добавляются в конец скрипты: yadi.sk/i/3RPuVu_i5NiusA Пересмотрел видео, не понятно каким образом добавляются! Поясни пожалуйста
Автоматом происходит чтобы не заморачиваться с подключением и контролем хешей (иначе придется использовать ejs в хтмл, как один из способов), отключить можно в конфиге, там где настройка хтмла (какая-то из опций стоит в true - поставь в false) Если хочешь узнать об этом больше то глянь видео по моему про js оптимизацию, где я рассказывал про ejs
Ну например ты разместил проект и его уже кто то юзает, а ты нашел баг исправил и перезалил файл без хэша. Браузер юзера файл не будет скачивать снова тк название не изменилось и будет работать со старым уже скачанным кодом.
Перестать его использовать )) а если серьезно, то не получиться, тк все плагины и прочее тянут за собой кучу скриптов. Делая что-то подобное на вп это лишь костыли, которые слетят при обновления плагина / темы (но это в случае, если ты сам эти плагины / темы не пишешь)
@@pranamanna да, создаются, поставь плагин clean-webpack-plugin он будет очищать папку билд каждый раз, когда будет запускаться команда билда. Но лучше указать только js/css тк на картинки в большинстве случаев он не нужен
Столкнулся с трудностью, решил использовать ejs в index.html, как показано в видео:
Соответственно установил: inject: false в htmlWebpackPlugin из файла webpack.base.conf.js По итогу все компилируется без ошибок, но перестает работать livereload в webpack-dev-server, приходится обновлять окно браузера в ручную через F5. Livereload начинает работать только если убрать inject: false (ну или inject: true) Кто-нибудь может что-то подсказать по этому вопросу? Timestamp: ruclips.net/video/eMesm6Ef4VA/видео.html
@@m.nimchenko , нет, отложил этот вопрос в долгий ящик. Когда разбирался c ejs думал, что это как-то поможет мне решить проблему одинаковых хешей у app.css vendor.js и app.js, но решение оказалось в другом, ниже в комментариях я писал об этом.
Полезное видео, Но в первых видео вроде все хорошо объяснял, а потом зачем то разогнался и стало тяжело понимать что к чему. Слышал, что ты хотел уложиться в какой то промежуток времени, зачем, если страдает из-за этого подача информации.
Как вы js оптимизируете?
Исходники - github.com/vedees/webpack-template
Текущий Коммит - vk.cc/9rn7fI
Пили больше видео, ты классно говориш и контент качественный
@@sergiymolchan8283 спасибо, теперь буду чаще записывать видео)
@@tocode Тяжелый урок) Подскажи как полностью заменить gulp?
1 - Создавать сколько угодно html (через pug)
2 - К каждой странице подключать тот js, который нужен
@@biLLie_wiLLie будет видео по использованию вебпака в верстке, оно полностью этот вопрос закроет)
1. Несколько хтмл: продублировать HtmlWebpackPlugin для нового html файла.
2. Разные js: либо убрать хеши и inject и подключать все в ручную (под каждую хтмл страницу) или оставить хеши и пользоваться ejs вытаскивая по имени нужный js файл. Но vendors.js должен быть на всех страницах)
@@tocode пожалуйста сделай этот урок с пагом и без дублирования HtmlWebpackPlugin. Вдруг страниц несколько десятков будет.
Лучше использовать для js и css в данном случае разные значения хэширования:
js - [hash], для css - [contenthash].
Так мы не будем заставлять клиент грузить заново и js, и css, если изменится только один из них
о спасибо, я добавлю это
А почему нельзя и для js использовать [contenthash]?
Хотел еще добавить, если сделать изменения(находясь в --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]
Инфа отсюда:
medium.com/@sahilkkrazy/hash-vs-chunkhash-vs-contenthash-e94d38a32208
Timestamp:
ruclips.net/video/eMesm6Ef4VA/видео.html
Достаточно просто вместо [hash] писать [contenthash] и для конфига на прод еще желательно в плагины довабить "clean-webpack-plugin", чтобы при каждом билде на прод старые файлы со старым хешем удалялись. В итоге у каждого файла свой хеш и меняться будет он только у того файла, что меняли + с плагином в папке dist всегда будет только самая свежая версия файлов
На 18.30 упомянули о разбиении большого вендорного файла на чанки и их асинхронной загрузке. Хотелось бы узнать подробнее как это делать. Спасибо!
За Webpack ОГРОМНОЕ спасибо! ))) Давай серию по docker )))
откуда вы вытаскиваете все эти новые слова?) я про вебпак только узнал, а тут уже докер какой-то
@@biLLie_wiLLie чем дальше в веб тем больше интересных технологий открываются)
Очень полезное видео! Спасибо!
Спасибо, помог
В дополнение к хешам (из скринкаста Ильи Кантора). Хеш лучше всего добавлять непосредственно к имени файла [name].[hash].js, но не как GET-параметр [name].js?v=[hash] т.к. не все CDN правильно воспринимают файлы с GET-параметрами.
Благодарю, с Vue и Vuex не сталкивался, было интересно!
Вью тут в пример, а так может быть что угодно, рад что понравилось)
Jack, а посредством чего твой форум (там где статьи) запоминает мой выбор темной темы (кнопка в левом нижнем углу)? Web storage?
local-storage, кстати один из базисов в курсе tocode.ru/curses/vuejs-s-nylya-do-pro
Ёлы палы, я дождался.
Кулик Дмитрий теперь видео будут выходить быстрее!
Для webpack рекомендуют использовать vue/dist/vue.esm.js, там tree-shaking есть для удаления из билда неиспользуемого кода. Я попробовал и действительно несколько килобайт сэкономило
СПАСИБО
Когда я подключаю реакт он попадает в vendors.js, а то что я пишу из компонентов идет в файл app.js?
А понял! Реакт использую 16 версии, а каждый билд это изменения в компонентах. Тогда vendors действительно не меняется, а лишь по новой подгружается app.js. Круто!!!
@@vedegis Все верно! Кстати, вот статья где есть также сплиты для реакта - hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
Следуя вашему видео я разделил файлы на vendor.111mysuperhash.js и app.111mysuperhash.js например. Далее я делаю изменение в app.js и запускаю билд проекта. Далее я ожидаю что будет изменен hash только у app.js, но в действительно хэш поменяется и у vendor.js. Это странно. Ведь в начале видео вы говорили, что юзеру не имеет смысл догружать vendor.js т.к. он не менялся, а меняется только app.js
У меня на текущий момент при любых изменениях в app.js меняется также и вендор тк вебпак и туда и туда проставляет разметку, а вот на пути из других директорий (например, сейчас я работаю с постами - файл postId.js) изменяются лишь текущий файлы и хеши сменяются только у нужных скриптов. хотя иногда я это дело контролирую глобальными переменными
А можно ли таким же образом разделить на app и vendors стили??
Например, вынести в вендоры какие-то библиотеки стилей или фреймворки типа Bootstrap.
Всё круто, а можно сообщить что Vue , это фреймворк? Либо ты смотришь с экосистемы Webpack?)
Да, вью это фреймворк. Только не совсем понял, что ты имеешь ввиду)
@Raiku По умолчанию, если юзер заходит первый раз на сайт то да - скачиваются оба файла, но в дальнейшем вендорс уже не скачивается, а перекачивается лишь app.js. Плюс в vue/cli добавляет asyc что тоже ускорят подгрузку тк js файлы загружаются асинхронно
@@tocode имею ввиду, что в видео ты постоянно говоришь, что подключаем библиотеку Vue, вот и уточняю))
@@ВасяСидоров-я6ш аа да, точно))
если используешь create-react-app, надо оптимизировать таким образом или там уже все настроено?
в create-react-app и vue cli это уже включено, по крайней мере, с которыми я работал
Такой вопрос, насколько критично использовать [contenthash]? Удобная же вещь, обновляет хэш только у тех файлов что изменились
я сделал именно так позже, такое вариант намного лучше
А через ejs можно в html импортировать другие html файлы?
т.е разбивать на header/content/footer , как например в blade шаблонизаторе
Alex Nasonov да, но лучше такое делать с pug, на фронте обычно используют его, ejs обычно под серверы. В планах видео по пагу
@@tocode pug как то не зашел , тем более это лишние трудности для людей в команде кто с ним не знаком
я правильно понял кроме "Доки по ejs в хтмл" можно еще использовать это github.com/ampedandwired/html-webpack-plugin#configuration ?
Alex Nasonov про командную работу это точно. Да, этот плагин в принципе может полностью текущий заменить
Очень классный материал, спасибо за видео, не подскажешь как вебпаку собираться без перезагрузки страницы, учитывая твою сборку!!
Искал как в webpack 4 сделать несколько точек входа, чтобы не грузуть ЛК на пасадочной странице. И тут не нашел. Автор показал как подключить ЛК на главную, а как подключить к host:port/lk (условно) не поеазал 🙁
Вот не ясно зачем делили конфиги, если по сути все прописали тупо в base, еще не ясно зачем после MiniCssExtractPlugin идет style-loader. Вроде все хорошо ,но обьяснения зачем и что нужно местами просто настолько скомканы , не хватает именно глубокого понимания что зачем, все по верхам. В любом случае спасибо за труд
Можете показать как вебпак может разбить пользовательский js-файл в котором есть импорт другого пользовательского js-файла чтобы он их не объединял воедино под именем того файла в котором производится импорт???
Для меня загадка, я переписал файл index.pug под себя, но все равно как то добавляются в конец скрипты: yadi.sk/i/3RPuVu_i5NiusA Пересмотрел видео, не понятно каким образом добавляются! Поясни пожалуйста
Автоматом происходит чтобы не заморачиваться с подключением и контролем хешей (иначе придется использовать ejs в хтмл, как один из способов), отключить можно в конфиге, там где настройка хтмла (какая-то из опций стоит в true - поставь в false)
Если хочешь узнать об этом больше то глянь видео по моему про js оптимизацию, где я рассказывал про ejs
Ты можешь поставить в плагине HtmlWebpackPlugin свойство inject: false
странно что до сих пор не стоит clean-webpack-plugin и dist надо чистить руками))
На фига эти хэши нужны так и не понял. Они что так часто меняются, чтобы этим заморачиваться?
Ну например ты разместил проект и его уже кто то юзает, а ты нашел баг исправил и перезалил файл без хэша. Браузер юзера файл не будет скачивать снова тк название не изменилось и будет работать со старым уже скачанным кодом.
Класть :D
1мб + 25кб = 1, 049 мб
Сделай пожалуйста настройку с pug
А как с WordPress такое сделать ускорение?
Перестать его использовать ))
а если серьезно, то не получиться, тк все плагины и прочее тянут за собой кучу скриптов. Делая что-то подобное на вп это лишь костыли, которые слетят при обновления плагина / темы (но это в случае, если ты сам эти плагины / темы не пишешь)
Скрипты с хешами yadi.sk/i/KMnfDp8VTtywiw будут разрастаться в папке js?
странно, по идее он должен полностью удалять папку дист и перезаписывать по новой чтобы не скапливалось
@@tocode проверь пжта у себя
@@pranamanna да, создаются, поставь плагин clean-webpack-plugin он будет очищать папку билд каждый раз, когда будет запускаться команда билда. Но лучше указать только js/css тк на картинки в большинстве случаев он не нужен
@@tocode Просто установить плагин clean-webpack-plugin, больше ничего настраивать не надо? Для меня сложновато "указать только js/css".
Столкнулся с трудностью, решил использовать ejs в index.html, как показано в видео:
Соответственно установил:
inject: false
в htmlWebpackPlugin из файла webpack.base.conf.js
По итогу все компилируется без ошибок, но перестает работать livereload в webpack-dev-server,
приходится обновлять окно браузера в ручную через F5.
Livereload начинает работать только если убрать inject: false (ну или inject: true)
Кто-нибудь может что-то подсказать по этому вопросу?
Timestamp:
ruclips.net/video/eMesm6Ef4VA/видео.html
у тебя получилось решить проблему?
@@m.nimchenko , нет, отложил этот вопрос в долгий ящик. Когда разбирался c ejs думал, что это как-то поможет мне решить проблему одинаковых хешей у app.css vendor.js и app.js, но решение оказалось в другом, ниже в комментариях я писал об этом.
@@staticcheese8608 понятно, спасибо. А не подскажешь, ejs можно использовать вместе с шаблонизатором pug?
Полезное видео, Но в первых видео вроде все хорошо объяснял, а потом зачем то разогнался и стало тяжело понимать что к чему. Слышал, что ты хотел уложиться в какой то промежуток времени, зачем, если страдает из-за этого подача информации.
да я смотрел по статистике, что длинные видео не ок. зато уже придумал идеальный формат для след. видео
@@tocode да хоть по 2 часа, не важно как по мне
зачекайте мою сборку github.com/AntonS86/webpack-starter-kit