jsliang Job Search Series - 31 - Webpack

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три Что такое Webpack
Четыре основных концепции Webpack
Пять процессов сборки Webpack
шесть вход
Семь выходов
восемь погрузчик
8.1 Общий загрузчик для обработки файлов
8.2 Общий загрузчик для проверки синтаксиса
8.3 Общий загрузчик для обработки HTML-кода
8.4 Часто задаваемые вопросы об обработке кода CSS
8.5 О распространенных загрузчиках, обрабатывающих код JS
Девять плагинов
9.1 Общие плагины
9.2 Плагины, повышающие эффективность
Десять различий между загрузчиком и плагином
одиннадцать решить
12 Настройка Webpack с 0
12.1 Технический отбор
12.2 Конфигурация загрузчика — обработка CSS, Меньше
12.3 Конфигурация загрузчика — обработка изображений
12.4 Конфигурация загрузчика — работа со шрифтами
12.5 Конфигурация загрузчика – общая схема многостраничной упаковки MPA
12.6 SourceMap
12.7 WebpackDevServer
12.8 парсинг бабеля
12.9 React
12.10 Оптимизация производительности
12.11 Прочее
Тринадцатое дополнение к знаниям: ленивая загрузка
13.1 Разделение кода
13.2 Принцип реализации
13.3 Загрузка Vue по запросу
Дополнение к четырнадцати знаниям: горячее обновление
14.1 Включить горячее обновление
14.2 Принцип горячего обновления
Пятнадцать дополнений к знаниям: 3 хэша
Дополнение к шестнадцати знаниям: исходная карта
Приложение к знаниям Seventeen: принцип упаковки Webpack
Восемнадцать ссылок
18.1 Серия статей Webpack
18.2 Оптимизация производительности Webpack
18.3 Scope Hoisting
18.4 Tree Shaking
18.5 ленивая загрузка

2 Предисловие

Это 2020 год, и кажется немного неразумным не заказывать Webpack.

Но на самом деле, если он не будет отнесен к такой группе, как [Architecture Group], я чувствую, что вероятность связаться с Webpack будет меньше.

подобноjsliangВ предыдущей компании у меня не было возможности связаться с Webpack, я использовал это решение, которое уже настроили другие, просто чтобы быть мальчиком-бизнесменом~

Три Что такое Webpack

Webpack — это сборщик статических модулей для современных приложений JavaScript (module bundler).

Когда Webpack обрабатывает приложение, он рекурсивно строит граф зависимостей (dependency graph), который содержит все модули, необходимые приложению, а затем упаковывает все эти модули в один или несколькоbundle.

Итак, его суть — упаковщик модулей, задачей которого является упаковка каждого модуля в соответствующийbundle.

Четыре основных концепции Webpack

mode:модель. В соответствии с режимом разработки, режимом производства и т. д.
entry:Вход
output:Экспорт
loader: Преобразователь модулей, который используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости. Вебпак для.jpg,.txtКогда содержимое не может быть обработано, необходимоfile-loader,url-loaderжду помощи.
plugins: расширения, которые внедряют логику расширения в определенное время в процессе сборки Webpack для изменения результатов сборки или выполнения других нужных вам действий.

Пять процессов сборки Webpack

Webpack подобен производственной линии, проходящей ряд процессов для преобразования исходных файлов в выходные данные.

Ответственность каждого процесса обработки на этой производственной линии едина, и между несколькими процессами существует отношение зависимости.Только после завершения текущей обработки он может быть передан следующему процессу для обработки.

WebpackТекущий процесс является последовательным процессом, и следующие процессы будут выполняться последовательно от начала до конца:

Параметры инициализации: из файла конфигурации иShellПрочитайте и объедините параметры в операторе, чтобы получить окончательный параметр
начать компиляцию: Инициализировать с параметрами, полученными на предыдущем шаге.Compilerобъект, загружает все настроенные плагины, выполняетrunметод начинает выполнять компиляцию
Определить вход: в соответствии с конфигурациейentryНайти все входные файлы
модуль компиляции: Начиная с файла ввода, вызывать все настроенныеLoaderПереведите модуль, найдите модули, от которых зависит модуль, а затем повторите этот шаг, пока все файлы, от которых зависит запись, не будут обработаны на этом шаге.
полная компиляция модуля: используется после шага 4LoaderПосле перевода всех модулей получите окончательный контент каждого модуля после перевода и зависимости между ними
выходной ресурс: Согласно зависимостям между записью и модулем, он собирается в модуль, содержащий несколько модулей один за другим.Chunk, затем поставьте каждыйChunkПреобразованный в отдельный файл и добавленный в список вывода, этот шаг является последней возможностью изменить содержимое вывода.
вывод завершен: После определения содержимого вывода определите путь вывода и имя файла в соответствии с конфигурацией и запишите содержимое файла в файловую систему.

Проще говоря:

инициализация: запустить сборку, прочитать и объединить параметры конфигурации, загрузитьPlugin, экземплярCompiler(крюк)
компилировать:отEntryвыезд, за каждыйModule(модуль) последовательный вызов, соответствующийLoaderперевести содержимое файла, а затем найтиModuleзависимыйModule, который компилируется рекурсивно
выход: будет компилироватьModuleв сочетании сChunk,БудуChunkПреобразование в файл и вывод в файловую систему (ChunkТо есть в процессе упаковки модуль ввода ссылается на другие модули, а модуль ссылается на модуль.Эта цепочка отношений соединяетModuleсформированныйChunk)

Во время этого процессаWebpackКонкретное событие будет транслироваться в определенный момент времени, плагин будет выполнять определенную логику после прослушивания интересующего события, и плагин может вызыватьWebpackкоторый предоставилAPIИзменятьWebpackрезультат операции.

шесть вход

Укажите упакованный входной файл, существует три разных формы:string | object | array.

Один к одному: одна запись, один файл пакета

module.exports = {
  entry: './src/index.js'
}

Многие к одному: несколько записей, один файл пакета

module.exports = {
  entry: [
    './src/index1.js',
    './src/index2.js',
  ]
}

Многие ко многим: несколько записей, несколько файлов пакетов

module.exports = {
  entry: {
    'index1': "./src/index1.js",
    'index2': "./src/index2.js"
  }
}

Семь выходов

Расположение упакованного файла.

module.exports = {
  ...,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    filename: "[name].js"
  }
}

Можно указать фиксированное имя файла, если он мультивход-мультисход (entryобъект), нельзя использовать однофайловый экспорт, необходимо использовать следующие методы
пройти черезWebpackВстроенные переменные заполнители:[name]

восемь погрузчик

loaderПорядок выполнения выполняется справа налево, то есть последнийloaderВыполнить первым.

Если есть конфигурация:

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(le|c)ss$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};

То есть разобраться в первую очередьless-loader, переработкаcss-loader, окончательная обработкаstyle-loader.

8.1 Общий загрузчик для обработки файлов

file-loader: когда импортированный файл.png,.txtподождите, вы можете пройтиfile-loaderРазобрать проект вurlПредставлять. Скопируйте файл по соответствующему пути в соответствии с конфигурацией и измените путь импорта упакованного файла, чтобы он указывал на правильный файл.
url-loader:url-loaderупакованныйfile-loaderи может быть независимым отfile-loaderИспользуется отдельно и может быть настроенlimit. меньше чемlimitразмер изображения, преобразованный вBase64, больше, чемlimitкогда используешьfile-loaderметод в.

8.2 Общий загрузчик для проверки синтаксиса

tslint-loader: проверка кода TypeScript через TSLint.
eslint-loader: проверить код JavaScript через ESLint

8.3 Общий загрузчик для обработки HTML-кода

html-withimg-loader: обрабатывать изображения в HTML

8.4 Общие загрузчики для обработки кода CSS

style-loader: динамически созданныйstyleтеги, вставьте код CSS вheadсередина.
css-loader: отвечает за обработку@import,urlи т.д. приговоры. Напримерimport css from 'file.css',url(image.png).
postcss-loader: Отвечает за дальнейшую обработку файлов CSS, такую как добавление префиксов браузера, сжатие CSS и т. д.
less-loader:Буду.lessСодержимое файла преобразуется в CSS.
sass-loader:Буду.sassСодержимое файла преобразуется в CSS.

8.5 О распространенных загрузчиках, обрабатывающих код JS

babel-loader: Чтобы преобразовать код JS в более низкую версию, нам нужно использоватьbabel-loader.
ts-loader: конвертировать TypeScript в JavaScript

Девять плагинов

9.1 Общие плагины

clean-webpack-plugin: Автоматическая очистка перед упаковкойdistкаталог для предотвращения остатков файлов.
copy-webpack-plugin: скопировать один файл или весь каталог в каталог сборки
mini-css-extract-plugin: Извлеките CSS и упакуйте его отдельно, а также настройте сжатие или нет.
html-webpack-plugin: этот плагин можно настроить для создания файла HTML5 сscriptТег содержит все пакеты Webpack. Если вы настроили несколько точек входа, вы можете соответствующим образом реализовать многостраничную упаковку приложения.

9.2 Плагины, повышающие эффективность

webpack-dashboard: он может отображать соответствующую информацию об упаковке более удобно.
webpack-merge: Извлечение общей конфигурации и сокращение повторяющегося кода конфигурации.
speed-measure-webpack-plugin: для краткости SMP анализирует время, отнимаемое загрузчиком и плагином в процессе упаковки Webpack, что помогает найти узкие места производительности в процессе сборки.
size-plugin: Отслеживайте изменения объема ресурсов, чтобы обнаруживать проблемы как можно раньше.
HotModuleReplacementPlugin: Горячая замена модуля

Десять различий между загрузчиком и плагином

Loader

LoaderПо сути, это функция, которая преобразует полученный контент и возвращает преобразованный результат.

потому чтоWebpackЗнайте только JavaScript, поэтомуLoaderОн становится переводчиком и обрабатывает различные типы ресурсов.

подобноfile-loaderилиurl-loader, на него можно правильно ссылаться после настройкиpngФорматирование изображений,txtи другие файлы форматов.

подобноstyle-loaderтак же какcss-loader, содержимое CSS может быть предварительно скомпилировано после ссылки.

Plugin

PluginЭто плагин, напримерjsliangТо же, что написано в плагине VS Code,PluginрасширенныйWebpackфункция.

Pluginтолько что вWebpackВ жизненном цикле плагина выполняются различные операции для достижения цели пользователя.

подобноhtml-webpack-plugin, после использования его с многовходовой формой может быть реализована функция многостраничного приложения.

подобноclean-webpack-pluginОчистить перед упаковкойdistсодержание,copy-webpack-pluginОтдельные файлы или целые каталоги могут быть скопированы в каталог сборки.

одиннадцать решить

resolveНастройте, как Webpack ищет файлы, соответствующие модулям.

Webpack имеет встроенную функцию анализа модульного синтаксиса JavaScript.По умолчанию он будет использовать правила, согласованные в модульном стандарте, для поиска, но вы можете изменить правила по умолчанию в соответствии со своими потребностями.

// webpack.config.js
module.exports = {
  //....
  resolve: {
    modules: ['./src/components', 'node_modules'] // 从左到右依次查找
  }
}

resolve.modules: укажите, в каких каталогах Webpack будет искать сторонние модули.node_modulesЕсли у вас есть модули в определенной папке в вашем проекте, которые часто импортируются и вы не хотите писать длинный путь, вы можете настроитьresolve.modulesчтобы упростить.
resolve.alias: элемент конфигурации сопоставляет исходный путь импорта с новым путем импорта через псевдоним.
resolve.extensions: В проектах, адаптированных для нескольких терминалов, могут.web.js, .wx.js, например, в проекте переноса в сеть мы хотим найти.web.js, если нет, ищите.js.extensions: ['web.js', '.js'].

12 Настройка Webpack с 0

Как настроить собственные леса Webpack с 0? Затем возникает вопрос выбора.

12.1 Технический отбор

Мобильный || ПК
MPA || SPA
HTML || Механизм шаблонов
CSS || Препроцессор
JavaScript ES5 || ES6
Служба локальной публикации (моделирование данных)
React || Vue
Многопользовательский проект || Одиночный проект
Спецификация синтаксиса Eslint
модульный тест
спецификация фиксации

12.2 Конфигурация загрузчика — обработка CSS, Меньше

use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
less less-loader: разбор.lessдокумент
postcss-loader autoprefixer:правильноflexМакет и т. д. имеют префикс

12.3 Конфигурация загрузчика - обработка изображений

file-loader: разбор.txt,.png,.mdи т.д. файл
url-loader:limit: 1024, чтобы определить, обрабатывается ли размер вbase64Формат

12.4 Конфигурация загрузчика — работа со шрифтами

url-loader

12.5 Конфигурация загрузчика – общая схема многостраничной упаковки MPA

Установитьglob
Будуentryа такжеhtmlwebpackpluginДинамическая генерация

12.6 SourceMap

Конфигурация среды разработки:devtool: "cheap-module-eval-source-map
Создайте конфигурацию онлайн (не рекомендуется):devtool: "cheap-module-source-map"

12.7 WebpackDevServer

Установить
Конфигурация:devServer
HMR(горячая замена модуля)
включить JS-модульHMR,нужноWebpackСотрудничать

12.8 парсинг бабеля

Установить:npm i babel-loader @babel/core @babel-preset-env -D
- @babel/core:babelосновной
- babel-loader:babelа такжеWebpackсоединительный мост
- babel-preset-env: какой код выводить, использовать для решения
babel-loader: Разобрать ES6+
@babel/polyfill: Прокладка. Содержит весь код новой функции ES6+.
.babelrc

12.9 React

Установить:react react-dom
использовать:@babel/preset-react

12.10 Оптимизация производительности

уменьшитьloaderОбъем файла:loaderизincludeконфигурация, вы можете указатьsrcкаталог, уменьшая объем проверки.
оптимизацияresolve.modulesКонфигурация: конфигурацияWebpackВ каких каталогах искать сторонние модули, по умолчаниюnode_modules.
Отдельный CSS:MiniCssExtractPlugin
hash,chunkhash,contenthashразница
- hashОбласть применения JS, CSS, изображениеhashСуществует разница, это меняется один раз за построить пакет.
- chunkhashкchunkКак единое целое, если вы измените эту часть, вы измените какую часть.hash. (При этом изменятся и зависимые модулиhash)
- contenthashИзменение происходит только тогда, когда меняется собственное содержание (отличное отchunkhash.
- Итак, JS работает дляchunkhash; CSS применяется кcontenthash; Изображение относится кhash
Сжать CSS:optimize-css-assets-webpack-pluginа такжеcssnano
Сжать HTML:html-webpack-plugin
Сжать изображение:img-webpack-loader
отдельныйWebpackКонфигурация: Разделениеbase.config,dev.config,mpa.configа такжеpro.config4, черезmergeпровестиconfigОбъединение конфигураций

Подробнее здесь:

Оптимизация производительности веб-пакета

12.11 Прочее

Как просто написатьWebpackпарсер
как написатьWebpack loader
как написатьWebpack plugin

Тринадцатое дополнение к знаниям: ленивая загрузка

Отложенная загрузка или загрузка по запросу — отличный способ оптимизировать веб-страницы или приложения.

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

Это ускоряет первоначальную загрузку приложения и уменьшает его общий размер, поскольку некоторые блоки кода могут никогда не загрузиться.

13.1 Разделение кода

расщепление кода (code splitting) Относится к процессу перехода кода, который не требуется, чтобы быть немедленно вызываться в коде, встроенном в асинхронный процесс загрузки.

Когда Webpack собран, он не будет загружать код, объявленный для асинхронной загрузки.Асинхронный код будет выделен в отдельный файл и загружен на страницу при фактическом вызове кода.

Ядром технологии разделения кода являетсяЗагружать ресурсы асинхронно.

К счастью, браузеры позволяют нам это делать, W3Cstage 3Технические характеристики:whatwg/loaderОпределение этого: вы можете пройтиimport()Ключевое слово заставляет браузер асинхронно загружать связанные ресурсы во время выполнения программы.

В Vue вы можете напрямую использоватьimport()ключевые слова делают это, тогда как в React вам нужно использоватьreact-loadableчтобы выполнить одно и то же.

13.2 Принцип реализации

Подмодуль, который необходимо лениво загрузить, упакован отдельно (children chunk)
Используйте функции для задержки загрузки кода подмодулей (import)

console.log('输出 1');

export default () => {
  console.log('输出 2');
};

const btn = document.querySelector('.btn');
btn.onclick = import('./print.js').then((module) => {
  const print = module.default;
  print();
});

13.3 Загрузка Vue по запросу

Vue характеризуется SPA — Single Page Application (одностраничное приложение).

Только при первой загрузке страницы и каждом последующем переключении страниц требуется только замена компонентов.

Это уменьшает количество запросов, ускоряет отклик страницы, снижает нагрузку на сервер и многое другое.

Однако, поскольку Vue — это SPA, все компоненты и ресурсы, связанные с компонентами, будут загружены при первой загрузке домашней страницы, что замедлит скорость открытия домашней страницы веб-сайта и ухудшит взаимодействие с пользователем.

В проекте Vue вы можете комбинировать Webpack, вvue-routerпройти черезimportВыполнить динамическую загрузку:

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import('../views/Home.vue')
}];

Дополнение к четырнадцати знаниям: горячее обновление

Обновление обычно делится на два типа:

Один из них — обновить страницу без сохранения состояния страницы, что является простым и грубым, напрямуюwindow.location.reload().
Другой основан наWDS(Webpack-dev-server) модуль горячей замены, вам нужно только частично обновить измененные модули на странице, и в то же время сохранить текущее состояние страницы, например, отмеченное состояние флажка, ввод поля ввода и т. д.

WebpackГорячее обновление также известно как горячая замена (Hot Module Replacement), сокращенноHMR.

Этот механизм позволяет заменять старые модули новыми модулями без обновления браузера.

14.1 Включить горячее обновление

в вебпакеwebpack.config.jsсередина:

настроитьdevServerизhotдляtrue
существуетpluginsувеличить вnew webpack.HotModuleReplacementPlugin()

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  //....
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 热更新插件
  ]
}

И в конфигурации файла записи:

if(module && module.hot) {
  module.hot.accept()
}

Когда код изменяется в это время, соответствующим образом обновляется только содержимое соответствующей части.

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

HMRСуть в том, что клиент подтягивает обновленный файл с сервера, если быть точнымchunk diff(chunkраздел, который необходимо обновить).

Фактическиwebpack-dev-server(WDS), а браузер поддерживаетWebsocket, при изменении локального ресурса,WDSОбновления будут отправлены в браузер вместе со временем сборки.hash, пусть клиент сравнит с последним ресурсом.

После того, как клиент сравнит различия, он отправитWDSположить началоAjaxзапрос на получение изменений (список файлов,hash), чтобы клиент мог использовать эту информацию для продолженияWDSположить началоjsonpпросьба получитьchunkдобавочное обновление.

Последующая часть (что делать после получения дополнительного обновления? Какие государства должны быть сохранены? Какие из них необходимо обновить?) Состоит изHotModulePluginзавершить, предоставив соответствующиеAPIДля разработчиков, чтобы иметь дело со своими собственными сценариями, такими какreact-hot-loaderа такжеvue-loaderс помощью этихAPIвыполнитьHMR.

Пятнадцать дополнений к знаниям: 3 хэша

Отпечаток файла — это суффикс имени выходного файла после упаковки, соответствующий 3 видамhash.

hashЭто связано с построением всего проекта. Пока в проекте есть изменения файлов, будет построен весь проект.hashзначения изменены, и все файлы имеют одинаковыйhashстоимость. (детализация для всего проекта)
chunkhashОн предназначен для выполнения анализа файла зависимостей в соответствии с различными записями и создания соответствующихchunk(модуль), сгенерируйте соответствующийhashстоимость. только модифицированныйchunk(модуль) не будет генерировать новые до тех пор, пока не будет перестроенhashзначение, не повлияет на другиеchunk. (детализацияentryкаждого входного файла)
contenthashЭто связано с каждым сгенерированным файлом, каждый файл имеет уникальныйhashстоимость.当要构建的文件内容发生改变时，就会生成新的hashзначение, и изменения в этом файле не повлияют на другие файлы в том же модуле, что и он. (гранулированное содержимое каждого файла)

Дополнение к шестнадцати знаниям: исходная карта

source mapЭто процесс сопоставления скомпилированного, упакованного и сжатого кода с исходным кодом. Упакованный и сжатый код не имеет хорошей читабельности.Если вы хотите отладить исходный код, вам нужноsoucre map.

mapФайл не будет загружен браузером, пока не открыты инструменты разработчика.

Обычно в онлайн-среде есть три решения для обработки:

hidden-source-map: С помощью сторонней платформы мониторинга ошибокSentryиспользовать
nosources-source-map: Будут отображаться только конкретный номер строки и стек ошибок для просмотра исходного кода. коэффициент безопасностиsource mapвысоко
source map:пройти черезnginxнастройка будет.mapФайл открыт только для белого списка (внутренняя сеть компании)

Примечание. Избегайте использования его в производстве.inline-а такжеeval-, потому что они увеличатсяbundleразмера и снижает общую производительность.

Приложение к знаниям Seventeen: принцип упаковки Webpack

Простая реализация Webpack

В простой реализации Webpack просто делается упаковка кода:

использоватьbabelПолное преобразование кода и создание зависимостей для одного файла
Сгенерировать граф зависимостей
Сгенерировать окончательный код упаковки

18 ссылок

В этой серии ссылок 51 статья.

18.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 минут】

2018 Статьи:

Научите вас, как свернуть загрузчик Webpack[Рекомендация по прочтению: 1 час]
Научить вас простому веб-пакету【Рекомендация по прочтению: 30 минут】
Демистификация Webpack — единственный способ создать высококачественный интерфейс【Рекомендация по прочтению: 30 минут】
Подробное объяснение веб-пакета[Рекомендация по прочтению: 1 час]
webpack4-experiment в начале, стучите одиннадцать раз подряд【Рекомендация по прочтению: 30 минут】
Окунитесь в мир веб-пакетов и станьте лучшим игроком в веб-пакетах.【Рекомендация по прочтению: 20 минут】
[Расширенный веб-пакет] Вы действительно освоили загрузчик? - загрузчик десять вопросов【Рекомендация по прочтению: 20 минут】
Решение для большого файла после упаковки webpack【Рекомендация по прочтению: 10 минут】
Создайте среду разработки React на основе Webpack【Рекомендация по прочтению: 10 минут】

2017 статьи:

Исходный код Webpack (1) — Tapable и поток событий【Рекомендация по прочтению: 10 минут】

18.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 минут】

18.3 Scope Hoisting

Что такое подъем объема в веб-пакете?【Рекомендация по прочтению: 5 минут】
Оптимизируйте вывод Webpack с помощью Scope Hoisting【Рекомендация по прочтению: 5 минут】
[WEBPACK] 654 - Удивительный научный руководство по воспитанию прицела WebPack【Рекомендация по прочтению: 5 минут】

18.4 Tree Shaking

Tree Shaking - Webpack 5.0.0-rc.0[Рекомендация по прочтению: только для справки]
Руководство по оптимизации Webpack 4 Tree Shaking Ultimate【Рекомендация по прочтению: 30 минут】
Практика оптимизации производительности Tree-Shaking — Принципы — 2018[Рекомендация по прочтению: только для справки]
Webpack4: Глубокий анализ встряхивания деревьев — 2019[Рекомендация по прочтению: только для справки]

18.5 Ленивая загрузка

Оптимизация упаковки Vue Webpack - маршрутизация ленивой загрузки (загрузка по требованию), объяснение принципа и инструкции по использованию【Рекомендация по прочтению: 20 минут】
Ленивая загрузка — Webpack v5.0.0-rc.0【Рекомендация по прочтению: 5 минут】
Разделение кода веб-пакета (то же самое для маршрутизации ленивой загрузки)【Рекомендация по прочтению: 10 минут】