webpack спрашивает, сколько вопросов вы можете поймать

предисловие

• Вопросы на собеседовании — это только введение.快速刷题就是背(Интервьюер спрашивает вас, но может быть не очень подробно),想深入理解还是得花大量精力;

Каков процесс сборки веб-пакета

• 初始化参数: анализировать параметры конфигурации веб-пакета, объединять параметры, переданные оболочкой, и параметры конфигурации файла webpack.config.js и формировать окончательный результат конфигурации;

• 开始编译: параметры, полученные на предыдущем шаге, инициализируют объект компилятора, регистрируют все настроенные плагины, а плагины контролируют узлы событий жизненного цикла сборки веб-пакета, делают соответствующие ответы и выполняют метод запуска объекта для запуска. компиляция;

• 确定入口: Из настроенной записи записи начните синтаксический анализ файла для построения синтаксического дерева AST, поиска зависимостей и рекурсии;

• 编译模块: рекурсивно в соответствии с типом файла и конфигурацией загрузчика вызвать все настроенные загрузчики для преобразования файла, а затем найти модули, от которых зависит модуль, а затем повторять этот шаг до тех пор, пока все файлы, от которых зависит запись, не будут обработаны в этот шаг;

• 完成模块编译并输出: после рекурсии получить результат каждого файла, включая каждый модуль и зависимости между ними, и сгенерировать фрагмент блока кода в соответствии с конфигурацией записи или подпакета;

• 输出完成: выводить все чанки в файловую систему;

Принцип горячего обновления вебпака

На самом деле это я开启了express应用, Добавлен мониторинг компиляции веб-пакета, добавлено долгое соединение веб-сокета с браузером, когда изменения файла запускают компиляцию и завершение веб-пакета,会通过sokcet消息告诉浏览器准备刷新. Чтобы снизить стоимость обновления,不用刷新网页, но刷新某个模块, webpack-dev-server может поддерживать горячее обновление, генерируя хеш-значение файла для сравнения модулей, которые необходимо обновить, после чего браузер выполняет горячую замену

服务端

• Запустите сервер webpack-dev-server
• Создать экземпляр веб-пакета
• создать сервер
• Добавить обратный вызов события done в webpack
• Компиляция завершена и сообщение отправлено клиенту
• Создать экспресс-приложение
• Установите файловую систему в файловую систему в памяти
• Добавить промежуточное ПО webpack-dev-middleware
• Промежуточное ПО отвечает за возврат сгенерированного файла.
• Начать компиляцию веб-пакета
• Создайте http-сервер и запустите службу
• Используйте sockjs для установки длинного соединения через веб-сокет между браузером и сервером.
• Создать сокет-сервер

客户端

• Сторона webpack-dev-server/client будет прослушивать это хеш-сообщение.
• После того, как клиент получит сообщение ok, он выполнит метод reloadApp для обновления.
• В reloadApp будет оцениваться, поддерживается ли горячее обновление. Если поддерживается, происходит событие webpackHotUpdate. Если не поддерживается, браузер обновляется напрямую.
• В webpack/hot/dev-server.js будет прослушиваться событие webpackHotUpdate.
• Метод module.hot.check будет вызываться в методе проверки
• Манифест запроса HotModuleReplacement.runtime
• Вызовом метода hotDownloadManifest JsonpMainTemplate.runtime
• Вызовите метод hotDownloadUpdateChunk JsonpMainTemplate.runtime, чтобы получить последний код модуля через запрос JSONP.
• Патч js получен или будет вызван метод webpackHotUpdate JsonpMainTemplate.runtime.js
• Затем будет вызываться метод hotAddUpdateChunk из HotModuleReplacement.runtime.js для динамического обновления кода модуля.
• Затем вызовите метод hotApply для горячего обновления.

Пакет webpack — это то, как генерируется хэш-код.

1. В экосистеме webpack есть много способов подсчитать хэш.

• hash
• chunkhash
• contenthash

Хэш представляет собой хеш-значение, сгенерированное при каждой компиляции веб-пакета, и все файлы, использующие этот метод, имеют один и тот же хэш. Каждая сборка заставляет webpack вычислять новый хэш. Чанкхэш формируется на основе входного файла и связанного с ним чанка. Изменения в файле повлияют только на хеш-значение чанка, связанного с ним, и не повлияют на хеш контента других файлов, созданных на основе содержимого файла. Когда содержимое файла изменяется, хэш содержимого изменяется

2. Избегайте одинаковых случайных значений

• вебпак в计算hash后分割chunk.产生相同随机值可能是因为这些文件属于同一个chunk,可以将某个文件提到独立的chunk（如放入entry）

Как реализовать автономное кеширование статических ресурсов в webpack

• При настройке веб-пакета мы можем использовать html-webpack-plugin для внедрения скрипта с html для достижения статического хранения сторонних или общих ресурсов в html и внедрения части логотипа, например<% HtmlWebpackPlugin.options.loading.html %>, в html-webpack-plugin вы можете внедрить в него скрипт, настроив атрибут html
• Используйте webpack-manifest-plugin и настройте webpack-manifest-plugin для создания файла manifestjson, который используется для сравнения разницы ресурсов js и замены его или нет.Конечно, также напишите скрипт кэширования
• Когда мы делаем Cl и CD, мы также можем добиться внедрения статического скрипта, отредактировав файловый поток, чтобы уменьшить нагрузку на сервер и повысить производительность.
• Вы можете динамически внедрять скрипты внешнего статического хранилища с помощью периодических функций, таких как пользовательские плагины или html-webpack-plugin.

Каковы общие плагины веб-пакета

• ProvidePlugin: Автоматически загружать модули, вместо того, чтобы требовать и импортировать
• html-webpack-pluginHTML-код может генерироваться автоматически в соответствии с шаблоном, а файлы css и js могут автоматически ссылаться на них.
• extract-text-webpack-pluginРазделите стили, указанные в файле js, в файл css.
• DefinePluginНастройте глобальные переменные во время компиляции, что полезно для обеспечения различного поведения для режима разработки и режима выпуска.
• HotModuleReplacementPluginГорячее обновление
• optimize-css-assets-webpack-pluginПовторяющийся CSS в разных компонентах можно быстро дедуплицировать
• webpack-bundle-analyzerИнструмент анализа файлов пакетов для веб-пакета, который отображает файлы пакетов в виде интерактивно масштабируемой древовидной карты.
• compression-webpack-pluginJS и CSS можно сжать с помощью gzip в рабочей среде.
• happypack: Ускоряет создание кода за счет модели с несколькими процессами.
• clean-wenpack-pluginОчистите неиспользуемые файлы в каждом пакете
• speed-measure-webpack-plugin: Вы можете увидеть трудоемкость выполнения каждого загрузчика и плагина (затраты времени на весь пакет, трудоемкость каждого плагина и загрузчика)
• webpack-bundle-analyzer: визуализировать объем выходных файлов Webpack (бизнес-компоненты, зависимые сторонние модули

Как реализованы плагины webpack

• Суть webpack — механизм потока событий Основной модуль: tabable (Sync + Async) Hooks конструкция === Compiler (компилировать) + Compiletion (создавать бандлы)
• Объект компилятора представляет собой полную конфигурацию среды веб-пакета. Этот объект создается один раз при запуске webpack и настраивает все рабочие параметры, включая опции, загрузчики и плагины. При применении плагина в среде веб-пакета плагин получит ссылку на этот объект компилятора. Вы можете использовать его для доступа к основной среде веб-пакета.
• Объект компиляции представляет сборку версии ресурса. При запуске промежуточного программного обеспечения среды разработки webpack всякий раз, когда обнаруживается изменение файла, будет создаваться новая компиляция, тем самым создавая новый скомпилированный ресурс. Объект компиляции представляет информацию о текущих ресурсах модуля, скомпилированных ресурсах, измененных файлах и состоянии отслеживаемых зависимостей. Объект компиляции также предоставляет множество обратных вызовов для ключевых моментов времени, которые плагин может использовать при выполнении пользовательской обработки.
• Создайте функцию плагина, определите метод применения в ее прототипе и укажите собственный обработчик событий веб-пакета.
• Функция внутренне обрабатывает конкретные данные внутреннего экземпляра веб-пакета.
• После завершения обработки вызовите функцию обратного вызова, предоставляемую webpack.

function MyWebpackPlugin()(
}；
// prototype 上定义 apply 方法
MyWebpackPlugin.prototype.apply=function(){
// 指定一个事件函数挂载到webpack
compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
// 功能完成调用后webpack提供的回调函数
callback()
})

Каковы общие загрузчики в веб-пакете

• file-loader: вывод файла в папку и обращение к выходному файлу через относительный URL-адрес в коде.
• url-loader: похож на загрузчик файлов, но может вставлять содержимое файла в код в режиме base64, когда файл очень маленький.
• source-map-loader: загружать дополнительные файлы исходной карты для упрощения отладки точки останова.
• image-loader: загружать и сжимать файлы изображений
• babel-loader: конвертировать ES6 в ES5
• css-loader: загрузка CSS, поддержка таких функций, как модульность, сжатие и импорт файлов.
• style-loader: вставка кода CSS в JavaScript и загрузка CSS с помощью манипуляций с DOM.
• eslint-loader: проверить код JavaScript через ESLint

Как webpack реализует постоянное кэширование

• 服务端设置http缓存头(управление кешем)
• зависимости пакетов и среды выполнения в разные части,即作为splitChunk,因为他们几乎是不变的
• 延迟加载:использоватьimport()方式, файлы, которые могут загружаться динамически, делятся на независимые фрагменты, чтобы получить собственный чанкхеш
• 保持hash值的稳定: Изменения в процессе компиляции и внутренней связи файлов максимально не влияют на расчет хэшей других файлов.Для нестабильности инкрементного цифрового идентификатора, генерируемого более низкой версией веб-пакета, можно использовать hashedModuleIdsPlugin для решения проблемы генерация на основе пути к файлу.

как пользоватьсяwebpackоптимизировать производительность интерфейса?

Использование веб-пакета для оптимизации производительности внешнего интерфейса означает оптимизацию вывода веб-пакета, чтобы конечный результат пакета быстро и эффективно работал в браузере.

• 压缩代码: Удалите избыточный код, комментарии, упростите написание кода и т. д. Вы можете использовать UglifyJsPlugin и ParallelUglifyPlugin от webpack для сжатия файлов JS и использовать cssnano (css-loader?minimize) для сжатия css.
• 利⽤CDN加速: во время процесса сборки измените указанный путь к статическому ресурсу на соответствующий путь в CDN. Вы можете использовать webpack для выходного параметра и параметр publicPath каждого загрузчика, чтобы изменить путь к ресурсу.
• Tree Shaking: удалить разделы кода, которые никогда не будут доступны. Этого можно добиться, добавив параметр --optimize-minimize при запуске веб-пакета.
• Code Splitting: разделите код на фрагменты по размерам маршрутизации или компонентам, чтобы их можно было загружать по требованию, при этом в полной мере используя кэширование браузера.
• 提取公共第三⽅库: Плагин SplitChunksPlugin для извлечения общих модулей, используя кеш браузера для кэширования этих общих кодов, которые не требуют частых изменений в течение длительного времени.

Принцип механизма webpack treeShaking

• treeShaking также называется摇树优化, это способ оптимизировать размер упаковки, удалив не только код,生产环境默认开启.
• допустимый代码不运行состояние, анализ不需要的代码;
• использоватьes6模块Спецификация
  • Выполняется внедрение модуля ES6静态分析, следовательно编译的时候正确判断到底加载了那些模块
  • Статически анализировать ход программы, определять те модули и переменные, которые не используются или на которые нет ссылок, а затем удалять соответствующий код.

портал

• Почему я настаиваю на том, чтобы вставать в шесть часов?
• шесть часов
• первая серия практических проектов vite + react + ts (конфигурация проекта)
• vite + react + ts рукопашный проект, серия 2 (актуальная глава)