С последнего поста мы используем CDN Уменьшить размер связке, когда мы добавляем большие библиотеки в нашем приложении!
Сегодня мы будем продолжать оптимизировать наш проект с небольшими советами!
свести к минимуму
минимизировать Варианты легко понимать, для машины, которая будет выполнять наш код, имя переменной, пространство между кодом бесполезна, мы можем сжать весь наш код в одной строке и коротко наше имя переменной, а машина сможет выполнить Это !
Это то, что минимизировать делает !
Он будет сжать ваш код и сжать его в одну строку!
Для режима PROD мы хотим использовать это! В отличие от Dev Mode (см. В следующей академии для этой части 😉)
Перед использованием его исходный код пучка (размер: 7КБ) 👇
Любой человек может прочитать этот код!
Но если мы используем минимизировать 👇
И мы получили 3 КБ !!
Кусок файла
Контекст: представьте, что ваше веб-приложение разделено на 2 больших деталя
Первая часть – это список продуктов, а другая – это страница, которая показывает нашу продукцию, купленную в 3D.
Некоторые посетитель не купит какой-либо продукт, но все 3D-модель загружена с момента приложения только в одном пучке.
Мы должны загружать только 3D-часть, когда пользователи выбирают наш продукт!
Для этого нам нужно разделить наше приложение в Кусок файл !
Кусковой файл – это файл, загруженный только тогда, когда нам это нужно.
Чтобы сделать это, нам нужно использовать специальный импорт!
Давайте возьмем простой пример, мы хотим загрузить Big Json File Когда пользователь нажимает на кнопку!
const jsonObjectImport = async () => import(/* webpackChunkName: "myChunkName" */ "./big-object.json")
Импорт сейчас является обещанием, поэтому нам нужно получить значение JSON, благодаря потреблению этого обещания 👇
document.getElementById("button").addEventListener("click", function() {
jsonObjectImport().then(jsonObject => console.log(jsonObject.default))
})
Файл JSON будет загружен только в том случае, если пользователь нажимает кнопку на кнопку, поэтому, когда мы создаем это, у нас есть два пакета, оригинал пучок и Кусковой пучок назван MyChunkName Действительно
Когда мы загружаем HTML, мы не загружали пакет Chunk в начале!
Но если вы нажмете на кнопку 🔥
Да, Кусок файла загружен И мы получаем объект JSON!
Очень интересно, мы разделим наше приложение! Когда у вас есть большая часть вашего приложения, не стесняйтесь куски!
Это называется Ленивая загрузка , это как большая галерея изображений, мы загружаем только изображение, которое пользователь может видеть, поскольку он не может прокрутить, так зачем загружать каждое изображение!
Hash File.
Последние советы по оптимизации нашего приложения! Держите сильные и фокус 💪
Когда мы используем файлы Chank, мы можем иметь например, 10 частей нашего приложения, и вы впервые развернуте ваше приложение, пользователь загрузит приложение и сохраняет все куски в кэше.
Если вы выпустите новую версию, но вы меняете только один файл Chank, вы развертываете новую версию, и пользователь будет загружать все куски, даже если только один изменился.
Вы можете изменить это поведение с хеш файл.
В конфигурации файла 👇
filename: "[contenthash:8].js"
Изменить имя пучка с [Contenthash: 8] , он создаст новое хеш-имя для нашего пакета и все куски!
Но что такое цель? 🤔
Когда вы измените Один хэш-кусок файла А вы выпустите новую версию, пользователь будет Только Перезагрузить новый Хэш-кухонный файл! 🎉
Я надеюсь, вам понравилась эта статья, в следующей статье мы проверим вместе, как настроить среду Dev с WebPack!
Вы можете проверить исходный код в этом Commit
Я надеюсь, тебе нравится это чтение!
🎁 Вы можете получить мою новую книгу Неправильные навыки в JavaScript, разница бесплатно, если вы следуете за мной на Twitter и т. М. Я 😁
Или получить это ЗДЕСЬ
☕️. Вы можете ПОДДЕРЖИВАТЬ Мои работы 🙏.
🏃♂️. Вы можете следовать за мной на 👇
🕊 Twitter: https://twitter.com/code__oz
👨💻. GitHub: https://github.com/code-oz.
И вы можете пометить 🔖 Эта статья!
Оригинал: “https://dev.to/codeoz/webpack-academy-5-optimise-your-bundle-size-with-minimize-chunk-file-hashed-1369”