каталог
Чем отличается передок без закидывания от соленой рыбы?
Два обзорных очка знаний
Эта серия относится к статьям 79 и обобщает статьи 6. Спасибо за вашу поддержку.
2.1 Babel
Адрес статьи:Babel
- AST: абстрактное синтаксическое дерево, которое является абстрактным представлением синтаксической структуры исходного кода.
-
принцип: Поместите существующий код ES6+, сначала черезлексический анализа такжеРазборПозжеРазобратьдля
AST, затем поместите этоASTконвертироватьдля нужной нам формыAST, и, наконец, поместите этоASTЗатем конвертируйте в ES5 или нужный формат.
2.2 Webpack
Адрес статьи:Webpack
-
что: по сути упаковщик модулей, чья работа заключается в упаковке каждого модуля в соответствующий
bundle -
Основная идея:
mode,entry,output,loader,plugin -
процесс сборки: инициализация, компиляция, вывод, плагины (
Plugin) контролировать в любое времяWebpackтранслировать и звонить в какой-то моментAPIИзменить текущий результат. -
entry: указывает файл записи пакета. Первоначально
string, то есть одна запись в один упакованный файл,objectмного к одному,arrayмногие ко многим - output: местоположение упакованного файла
- loader: Транслятор, обработка разных ресурсов, выполнение справа налево
-
plugin: плагин, расширение
Webpackфункция, мониторWebpackжизненный цикл звонкаAPIИзменить результат вывода. -
resolve: настроить
WebpackКак найти файл, соответствующий модулю.resolve.modules/extensions/include/exclude -
Настроить Webpack с 0
- Выбор технологии: мобильный терминал | ПК, MPA | SPA, HTML | шаблонизатор, CSS | препроцессор, ES5 | ES6+, Mock, React | Vue, сотрудничество нескольких человек | проект одного человека, ESlint | TSlint, модульное тестирование, представление спецификации
- Загрузчик обрабатывает CSS, Less, Sass
- Загрузчик обрабатывает изображения
- Загрузчик обрабатывает шрифты
- Многостраничная упаковка конфигурации загрузчика (MPA)
- source map
- webpack dev server
- babel
- react
- оптимизация производительности
- Другие: Парсер, Загрузчик записи, Плагин записи
-
ленивая загрузка
-
разделение кода:
code splitting - Принцип реализации: Подмодули упакованы отдельно, лениво загружены функциями
- Vue загружает по запросу
-
разделение кода:
-
Горячее обновление
-
открытый метод: настроить
devServer, добавить плагин горячего обновленияHotModuleReplacementPlugin - Принцип горячего обновления
-
открытый метод: настроить
-
3 хэша:
-
hash: Пока есть изменение файла во всем проекте, измените его. -
chunkhash: соответствует записиchunkвнесли изменения, затем сгенерируйте новыйhashзначение, не повлияет на другиеchunk -
contenthash: при изменении содержимого файла файл будет заменен и создан новый.hash, не затрагивая другие файлы в том же модуле
-
- source map: процесс сопоставления скомпилированного, упакованного и сжатого кода с исходным кодом.
2.3 Webpack - Tree Shaking
Адрес статьи:Webpack - Tree Shaking
-
Tree Shaking: в
package.jsonоткрыть вsideEffects, который преобразует синтаксис шаблона ES6 вimportПоведение импорта файлов помечается как отсутствие побочных эффектов, затем открывается-pпроизводственный режим, позволяющийWebpackпозвонить во внутреннююUglifyJSWebpackPluginдля удаления неиспользуемого кода. -
dead-code: код не будет выполнен, или результат выполнения не будет использован, или код будет воздействовать только на мертвые переменные, вызываемые
dead-code -
побочный эффект: если в
importКод, который ведет себя особым образом при импорте, называется кодом с побочными эффектами, такими какpolyfillвлияет на глобальную область -
статический анализ: синтаксис шаблона ES6 позволяет буквально анализировать код без его выполнения. статический анализ
Tree ShakingОсновы. а такжеrequireЕго необходимо выполнить, чтобы узнать содержание ссылки, и его нельзя оптимизировать с помощью статического анализа.
2.4 Webpack - Scope Hoisting
Адрес статьи:Webpack - Scope Hoisting
- Scope Hoisting: функция, добавленная Webpack3, увеличение масштаба. Принцип заключается в анализе эталонных отношений модулей, объединении разбросанных модулей в одну и ту же функцию и необходимости синтаксиса шаблона ES6 для статического анализа.
2.5 Простая реализация Webpack
Адрес статьи:Простая реализация Webpack
-
использовать
babelПолное преобразование кода и создание зависимостей для одного файла - Сгенерировать граф зависимостей
- Сгенерировать окончательный код упаковки
2.6 Оптимизация производительности Webpack
Адрес статьи:Оптимизация производительности веб-пакета
-
resolve.modules: для настройки
WebpackВ каких каталогах искать сторонние модули (node_modules) -
resolve.extensions: при импорте пути без суффикса файла
WebpackАвтоматически добавит суффикс, чтобы попытаться спросить, существует ли файл, иresolve.extensionsИспользуется для настройки списка используемых суффиксов; по умолчаниюextensions:['js', 'json'] -
resolve.include/exclude:к
babel-loaderНапример, поincludeа такжеexcludeпомогите нам избежатьnode_modulesэти огромные папки] -
тайник:
cache-loaderа такжеuglifyjs-webpack-plugin, запишите результат компиляции в кеш жесткого диска и в следующий раз вытащите кеш напрямую, если файл не изменится -
мультипрогресс:
Happypackа такжеthread-loader, разбейте задачу на несколько подпроцессов для одновременного выполнения и повышения эффективности упаковки. -
Многопроцессное сжатие:
WebpackавтономныйUglifyJSWebpackPluginПлагин сжатия работает в однопоточном режиме, аTerserWebpackPluginМожет выполняться параллельно (многопоточно) -
Статическое разделение ресурсов:
CommonsChunkPluginsПерестраивает каждую сборкуvendor, используется из соображений эффективностиDllPluginСтороннюю библиотеку можно запаковать в файл отдельно, и она будет переупакована только в случае изменения версии самой зависимости -
Пакетное сжатие ресурсов:
-
JS-сжатие:
UglifyJSWebpackPluginа такжеTerserWebpackPlugin -
Сжатие HTML:
HtmlWebpackPlugin -
Сжатие CSS:
MiniCssExtractPlugin -
Сжатие изображения:
ImageWebpackPlugin - Сжатие Gzip: не включает изображения
-
JS-сжатие:
- Tree Shaking
- Scope Hoisiting
- нагрузка по требованию
Три ссылки
В этой серии 79 ссылок.
3.1 Разное
2020:
- Как разработать и внедрить интерфейсный код в крупной компании?【Рекомендация по прочтению: 10 минут】
- Front-end Advanced Advancement: История разработки Front-end Deployment【Рекомендация по прочтению: 20 минут】
2019:
- Мышление и практика внешнего изоморфного рендеринга【Рекомендация по прочтению: 20 минут】
2018:
- Зачем фронтенд-инженерам изучать принципы компиляции?【Рекомендация по прочтению: 30 минут】
- MVVM в 50 строках кода, почувствуйте искусство замыкания【Рекомендация по прочтению: 10 минут】
- Прошу прощения! Отложите свои десять минут и позвольте принципу MVVM вернуться к вам【Рекомендация по прочтению: 20 минут】
- Контрольный список оптимизации производительности внешнего интерфейса на 2018 г.【Рекомендация по прочтению: 30 минут】
- Схема оптимизации загрузки изображений веб-страницы【Рекомендация по прочтению: 20 минут】
- Как справиться с элегантной аномалией внешнего интерфейса【Рекомендация по прочтению: 30 минут】
3.2 Babel
- Статья для понимания Babel, которую должна знать фронтенд-разработка【Рекомендация по прочтению: 10 минут】
- Знания Babel7, которые нельзя упустить【Рекомендация по прочтению: 30 минут】
- Знания Babel, которые необходимо знать фронтенд-инженерам【Рекомендация по прочтению: 30 минут】
- Углубленный Babel, часть 1: архитектура и принципы + реальный бой【Рекомендация по прочтению: 30 минут】
- Объясните простыми словами Babel Часть 2: Плагин и макросы【Рекомендация по прочтению: 30 минут】
- Самосовершенствование фронтенд-инженеров — вот что о Babel【Рекомендация по прочтению: 20 минут】
- Фронтенд и принцип компиляции — пишем интерпретатор JS на JS【Рекомендация по прочтению: 20 минут】
- Интервьюер: Вы знаете Бабеля? Вы когда-нибудь писали плагин для Babel? Ответ: Нет. умер【Рекомендация по прочтению: 10 минут】
- Начало работы с babel — реализация конвертера классов es6【Рекомендация по прочтению: 10 минут】
3.3 Механизм шаблонов
- Написание простого механизма шаблонов JavaScript【Рекомендация по прочтению: 5 минут】
- Принцип шаблонизатора JavaScript, несколько строк кодаПредложение по чтению: 10 минут]
- Принцип компиляции шаблона Vue【Рекомендация по прочтению: 30 минут】
3.4 Внешний мониторинг
- Интерфейсный инструмент для мониторинга производительности за 5 минут【Рекомендация по прочтению: 10 минут】
- Максимальный внешний мониторинг【Рекомендация по прочтению: 10 минут】
- Лучшие практики внешнего мониторинга в эпоху большого внешнего интерфейса GMTC【Рекомендация по прочтению: 20 минут】
- Фронтальный мониторинг и проектирование встроенных точечных интерфейсных решений【Рекомендация по прочтению: 20 минут】
- Команда Tencent CDC: внешнее решение для мониторинга исключений【Рекомендация по прочтению: 20 минут】
- Максимальный внешний мониторинг【Рекомендация по прочтению: 10 минут】
Четыре ссылки на Webpack
Серия ссылок Webpack включает 52 статьи.
4.1 Серия статей Webpack
разное:
- Документация Webpack на китайском языке[Рекомендация по прочтению: нет]
- Маленькая книга Webpack[Рекомендация по прочтению: нет]
2020 Статьи:
- «Кровавая рвота» и еще дюжина вопросов интервью Webpack[Рекомендация по прочтению: 1 час]
- Подробно разблокируйте серию Webpack (базовая)[Рекомендация по прочтению: 1 час]
- Подробно разблокируйте серию Webpack (дополнительно)【Рекомендация по прочтению: 30 минут】
- Позвольте вам подробно разблокировать серию Webpack (оптимизация)【Рекомендация по прочтению: 20 минут】
- Загрузчик Webpack от начала до понимания серии: vue-loader【Рекомендация по прочтению: 20 минут】
- загрузчик webpack от начала до понимания серии: style-loader【Рекомендация по прочтению: 20 минут】
- Путь Лина к webpack — загрузчику【Рекомендация по прочтению: 20 минут】
- Демистификация плагина webpack【Рекомендация по прочтению: 30 минут】
2019 Статьи:
- 14 пунктов знаний о webpack4【Рекомендация по прочтению: 30 минут】
- Реализовать простой веб-пакет[Рекомендация по прочтению: 1 час]
- Одна статья, чтобы освоить процесс компиляции Webpack[Рекомендация по прочтению: 1 час]
- Загрузчик веб-пакетов, которым должны овладеть фронтенд-инженеры【Рекомендация по прочтению: 30 минут】
- Легко понять принцип горячего обновления веб-пакета[Рекомендация по прочтению: 1 час]
- 5 самых запутанных знаний в webpack【Рекомендация по прочтению: 30 минут】
- Рецепты сборки интерфейса【Рекомендация по прочтению: 30 минут】
2018 Статьи:
- Научите вас, как свернуть загрузчик Webpack[Рекомендация по прочтению: 1 час]
- Научить вас простому веб-пакету【Рекомендация по прочтению: 30 минут】
- Демистификация Webpack — единственный способ создать высококачественный интерфейс【Рекомендация по прочтению: 30 минут】
- Подробное объяснение веб-пакета[Рекомендация по прочтению: 1 час]
- webpack4-experiment в начале, стучите одиннадцать раз подряд【Рекомендация по прочтению: 30 минут】
- Окунитесь в мир веб-пакетов и станьте лучшим игроком в веб-пакетах.【Рекомендация по прочтению: 20 минут】
- [Расширенный веб-пакет] Вы действительно освоили загрузчик? - загрузчик десять вопросов【Рекомендация по прочтению: 20 минут】
- Решение для большого файла после упаковки webpack【Рекомендация по прочтению: 10 минут】
- Создайте среду разработки React на основе Webpack【Рекомендация по прочтению: 10 минут】
2017 Статьи:
- Исходный код Webpack (1) — Tapable и поток событий【Рекомендация по прочтению: 10 минут】
4.2 Оптимизация производительности Webpack
2019 Статьи:
- Оптимизация Webpack — удвойте эффективность сборки【Рекомендация по прочтению: 10 минут】
- Оптимизация производительности --- Оптимизация скорости сборки Webpack【Рекомендация по прочтению: 10 минут】
- Используйте webpack4, чтобы повысить скорость компиляции на 180%【Рекомендация по прочтению: 10 минут】
- Код многопроцессорного параллельного сжатия【Рекомендация по прочтению: 5 минут】
- webpack 4: оптимизация разделения кода и чанков【Рекомендация по прочтению: 5 минут】
2018 Статьи:
- Практика оптимизации производительности Tree-Shaking — принципы【Рекомендация по прочтению: 10 минут】
- На 80% меньше объема! Раскройте истинный потенциал встряхивания дерева веб-пакетов【Рекомендация по прочтению: 10 минут】
- Ваш Tree-Shaking бесполезен【Рекомендация по прочтению: 5 минут】
- Как webpack устраняет мертвый код с помощью анализа области действия【Рекомендация по прочтению: 5 минут】
- Пусть ваш Webpack взлетит — история участника Koala Практика оптимизации Webpack【Рекомендация по прочтению: 5 минут】
- webpack dllPlugin объем упаковки и оптимизация скорости【Рекомендация по прочтению: 5 минут】
- Разделение кода для оптимизации веб-пакета【Рекомендация по прочтению: 5 минут】
2017 Статьи:
- Скорость оптимизации пакетов Webpack【Рекомендация по прочтению: 5 минут】
- Speed Up Webpack — узкий поиск файлов【Рекомендация по прочтению: 5 минут】
- Разделение кода Webpack Dafa【Рекомендация по прочтению: 5 минут】
4.3 Scope Hoisting
- Что такое подъем объема в веб-пакете?【Рекомендация по прочтению: 5 минут】
- Оптимизируйте вывод Webpack с помощью Scope Hoisting【Рекомендация по прочтению: 5 минут】
- [Webpack] 654 - Удивительное учебное пособие по Webpack Scope Hoisting【Рекомендация по прочтению: 5 минут】
4.4 Tree Shaking
- Tree Shaking - Webpack 5.0.0-rc.0[Рекомендация по прочтению: только для справки]
- Руководство по оптимизации Webpack 4 Tree Shaking Ultimate【Рекомендация по прочтению: 30 минут】
- Практика оптимизации производительности Tree-Shaking — Принципы — 2018[Рекомендация по прочтению: только для справки]
- Webpack4: Глубокий анализ встряхивания деревьев — 2019[Рекомендация по прочтению: только для справки]
4.5 Ленивая загрузка
- Оптимизация упаковки Vue Webpack - маршрутизация ленивой загрузки (загрузка по требованию), объяснение принципа и инструкции по использованию【Рекомендация по прочтению: 20 минут】
- Ленивая загрузка — Webpack v5.0.0-rc.0【Рекомендация по прочтению: 5 минут】
- Разделение кода веб-пакета (то же самое для маршрутизации ленивой загрузки)【Рекомендация по прочтению: 10 минут】
репозиторий документации jsliang предоставляетсяЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.