Если нет аварий, время еженедельного обновления - воскресенье.
1. Полезность веб-пакета
Причина, по которой я изучаю веб-пакет, проста, потому что он модный, а я просто люблю модные вещи. Я также узнал о веб-пакете раньше, но он ограничен только его использованием и может понять его файл конфигурации. И на этот раз я лучше понимаю его полезность.
① Простота использования es6
Начнем сначала с es6.Браузерная поддержка es6 невысока. Реализована лишь его часть, но практичность и простота использования es6 не вызывает сомнений. В некотором смысле это не просто расширение предыдущей версии, это исправление для предыдущей версии.
//写法1：
var hi = function () { this.name = 'MrXu' }
hi()
console.log(name) // MrXu
//写法2：
var hi = () => { this.name = 'MrXu' }
hi()
console.log(name) // 报错
123456789Вышеупомянутая функция — это просто функция со стрелкой в недавно добавленной функции es6, которая предотвращает продвижение функции и позволяет вызовам кода следовать порядку вызова. Если вы хотите всестороннего и систематического понимания, вы можете прочитать книгу es6, написанную Руаном Ифэном, в которой описаны некоторые методы использования es5 для реализации es6, а также новые сценарии использования синтаксиса es6, что довольно хорошо (Прочитай ссылку, нажми на меня)
Сказав так много, все дело в отношениях с webpack, которые могут позволить вам использовать синтаксис es6, если браузер не поддерживает синтаксис es6. Таким образом, вы можете использовать его во время просмотра. Текущая версия веб-пакета высоко интегрирована и экономит много настроек.Теперь она может напрямую компилировать синтаксис es6.Как и в предыдущей версии, вам нужно добавить загрузчик babel в пакет es6, что теперь очень удобно. И добавил китайский перевод, так удобнее
②Все сжатые файлы передаются на компьютер
Я человек, который любит стремиться к совершенству, но иногда уступаю место из-за лени. Так же, как и полный и независимый код JS, его лучше всего сжимать. Потому что это не только гарантирует, что ваш исходный код не будет раскрыт, но также обеспечивает меньший объем, тем самым повышая эффективность загрузки браузера. Но кто хочет каждый раз вручную находить инструмент сжатия, чтобы сжимать его?Он действительно подходит для автоматизации такого рода повторяющейся работы, и webpack может легко помочь вам упаковать его.
③ Код был изменен, но браузер не действует. что случилось?
Эта ситуация действительно раздражает, будь вы новичок или ветеран, всегда невозможно подумать, что это кеш браузера в первый раз. Когда я узнаю правду, меня рвет кровью.Есть еще много способов предотвратить кэширование браузера.
1. Например, вы устанавливаете браузер на конфигурацию, которая не кэширует файлы, но это не идеально для большинства людей.Многие люди хотят помнить свои пароли и не хотят, чтобы некоторые веб-сайты всегда вводили их дважды.
2. Другой вариант — изменить имя файла или добавить временную метку при загрузке файла, чтобы позволить браузеру воспроизвести загрузку. Я считаю, что большой файл JS может быть лучше, чем десятки раз. Хватит ли терпения изменить его десятки раз?
Большинство из двух вышеперечисленных способов не обязательно возвращаются и действительно делают это.С вебпаком можно легко реализовать второй способ, и даже освежить браузер осталось. легко и приятно
③ Уменьшить количество запросов интерфейса
Есть много значков изображений, которые помещаются на одно изображение. Причина этого в том, что это может уменьшить размер изображения и пропускную способность. Точно так же упаковка файлов JS и css в один также может уменьшить размер и ускорить загрузку интерфейса.
④Верхнее приложение, спа-режим
Лично я считаю, что самым большим преимуществом упаковки является рождение модели SPA (одностраничное приложение).
Вышеупомянутые четыре являются относительно распространенными вариантами использования.Вы также можете написать свой собственный загрузчик, чтобы реализовать индивидуальную упаковку для себя, что имеет много преимуществ.
⑤webpack может учиться так
Откройте официальную документацию по веб-пакету и ткните меня
1. Первый шаг — щелкнуть документ, чтобы войти в интерфейс информации о документе (если английский не подходит, выберите язык в крайнем правом углу и выберите китайский)
2. Сделать небольшой пример по гайду
Когда я впервые начал смотреть на веб-пакет, я сначала посмотрел на концепцию, которая очень скучна для большинства людей, и легко потерять уверенность в обучении, но это отличается, если сначала сделать небольшой пример. Выполнение действий может не только дать вам обратную связь в режиме реального времени, но и повысить ваше чувство вовлеченности и идентичности. И задействованные примеры — это все, что вы часто используете. Я лично считаю, что вещи, сделанные по примерам, в основном могут удовлетворить ваши потребности на 80%.
3. После выполнения примера добавляю знания
На этом этапе вы можете увидеть загрузчики, плагины и API. Вам не нужно смотреть слишком конкретно, вам нужно только смотреть на заголовки, потому что в настоящее время вам не нужно использовать их, чтобы сделать конкретную вещь, и нехорошо смотреть на слишком много.
4. Время читать концепции
Закончив все вышеперечисленное, вы быстро становитесь всемогущим, но возникает ощущение парения. Это потому, что вы не нашли своих корней, вы всегда следуете за другими, и вы несколько ограничены другими. Когда вы почувствуете это, приходите и посмотрите на концепции, и вам не только не будет слишком скучно (скучно все еще есть, как на уроках политики, но вы теперь человек стремления. Так что это не будет слишком скучно) , И получит много
2. Обмен мгновенными сообщениями в облаке NetEase
Область обмена мгновенными сообщениями очень широка, электронная коммерция, медицина, животноводство и другие отрасли захотят получить функцию обмена мгновенными сообщениями, а своевременная связь с клиентами - очень хороший способ повысить привязанность клиентов. Причина, по которой NetEase Cloud упоминается здесь, заключается в том, что компания использует продукты обмена мгновенными сообщениями NetEase Cloud.
Раньше я также пользовался системой обмена мгновенными сообщениями от layui, по сравнению с NetEase Cloud это действительно хижина. NetEase обеспечивает не только веб-сторону, сторону ПК, Android, Apple и h5 со всех сторон. Более того, разработчикам нужно только подключить информацию о пользователе, чтобы быстро ею воспользоваться, что очень удобно.
Я также составил две статьи об использовании обмена мгновенными сообщениями NetEase Cloud:
Обмен мгновенными сообщениями Netease (1)
Обмен мгновенными сообщениями Netease (2)
3. Бесплатные видео, объясняющие использование промиса, там много странных трюков
Щелкните здесь, чтобы просмотреть URL-адрес видео
Функция Promise очень важна при разработке узлов.Если вы думаете, что не знаете, как ее использовать, вы можете посмотреть это видео.Видео сделано старшими с 11-летним опытом разработки и имеет высокое качество.
4. Бесплатная книга от Али "Больше, чем код"
Подпишитесь на официальную учетную запись «Ali Technology» и ответьте на код, чтобы получить ссылку для загрузки электронной версии, в которой обобщаются отличные статьи, недавно выпущенные Али, которые очень систематичны и содержательны для расширения.
5. Как опубликовать личный проект на gitHub, а сгенерированный сайт содержит много навыков и опыта создания проектов на github
У человека, который делает само видео, есть зрелый проект "wangEdit" на github, количество звезд несколько тысяч, и автор регулярно его поддерживает. Он включает в видео свой собственный опыт, рассказывая всем, какСделать интерфейсный проект с открытым исходным кодом с нуля, на что обратить внимание и как продвигать и поддерживать
Прошлые статьи:
Углубленное фронтенд-обучение оказывается таким интересным Выпуск 1
Если вы хотите читать мои статьи в первый раз, вы можете подписаться на мой публичный аккаунт «Шумный дневник» или отсканировать QR-код ниже.