Это 3-й день моего участия в августовском испытании обновлений, узнайте подробности события:Испытание августовского обновления

Введение

Друзья, которые учатся от 0 до 1, могут обратиться к статье для предварительного обучения:

• Путь к изучению Webpack5 (базовый)
• Путь к изучению Webpack5 (Практика)

Предварительная статьяПуть к изучению Webpack5 (базовый)Краткое введение в концепцию webpack,Путь к изучению Webpack5 (Практика)Начиная с конфигурации, проект SASS + TS + React был собран с помощью webpack.

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

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

• webpack-cli@4.7.2
• webpack@5.46.0

2. Инструменты для оптимизации эффективности

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

Установите следующие плагины веб-пакета, чтобы помочь нам проанализировать эффективность оптимизации:

• progress-bar-webpack-plugin: просмотр хода компиляции;
• speed-measure-webpack-plugin: проверить скорость компиляции;
• webpack-bundle-analyzer: Анализ упакованного объема.

1. Индикатор выполнения компиляции

Вообще говоря, время первой компиляции проекта среднего размера составляет 5-20 секунд, и индикатора выполнения ждать не приходится.progress-bar-webpack-pluginПлагин проверяет ход компиляции, что удобно для нас, чтобы понять ситуацию компиляции.

Установить:

npm i -D progress-bar-webpack-plugin

webpack.common.jsКонфигурация выглядит следующим образом:

const chalk = require('chalk')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
module.exports = {
  plugins: [
    // 进度条
    new ProgressBarPlugin({
        format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
      })
  ],
}

Тесно добавлены полужирный и зеленый стили выделения для процента прогресса.

Включая содержимое, индикатор выполнения, процент выполнения, время потребления, эффект индикатора выполнения выглядит следующим образом:

2. Анализ скорости компиляции

Чтобы оптимизировать скорость сборки веб-пакета, нам сначала нужно узнать, какие плагины и какие загрузчики занимают много времени, чтобы мы могли провести целевую оптимизацию.

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

Установить:

npm i -D speed-measure-webpack-plugin

webpack.dev.jsКонфигурация выглядит следующим образом:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  // ...webpack config...
})

Включая трудоемкую сборку каждого инструмента, эффект следующий:

Примечание. Стиль этих серых текстов заключается в том, что я работаю в терминале VSCODE, что приводит к тому, что цветные шрифты отображаются в серые. Просто поменяйте терминал, например,iTerm2.

3. Анализ объема упаковки

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

использоватьwebpack-bundle-analyzerПросмотрите анализ размера пакета, созданный после упаковки, и отобразите содержимое пакета в виде удобной, интерактивной и масштабируемой древовидной диаграммы. Помогите нам проанализировать вывод, чтобы проверить, где заканчивается модуль.

Установить:

npm i -D webpack-bundle-analyzer

webpack.prod.jsКонфигурация выглядит следующим образом:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 打包体积分析
    new BundleAnalyzerPlugin()
  ],
}

Содержит объемный анализ каждой пачки, эффект следующий:

3. Оптимизируйте опыт разработки

1. Автоматическое обновление

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

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

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

Официальный рекомендуемый метод веб-пакета:webpack-dev-server,существуетПуть к изучению Webpack5 (Практика) - Глава DevServerбыл введенwebpack-dev-serverПомогите нам автоматически скомпилировать реализацию кода после изменения кодаавтоматическое обновлениеиспользование не будет повторяться здесь.

Оптимизирован для среды разработки, модификацииwebpack.dev.jsконфигурация.

2. Горячее обновление

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

2.1 Изменить конфигурацию webpack-dev-сервера

Обновите конфигурацию webpack-dev-server с помощью встроенного в webpack плагина HMR.

webpack.dev.jsКонфигурация выглядит следующим образом:

module.export = {
    devServer: {
        contentBase: './dist',
        hot: true, // 热更新
      },
}

2.2 Представляем плагин react-refresh-webpack

использоватьreact-refresh-webpack-pluginКомпоненты реакции на горячее обновление.

Установить:

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

webpack.dev.jsКонфигурация выглядит следующим образом:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ReactRefreshWebpackPlugin(),
    ]
}

Возникшие проблемы:

После настройки плагина SpeedMeasurePlugin горячее обновление будет недействительным, и отобразится запросruntime is undefined.

решение:

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

окончательный эффект:

При обновлении кода компонента реакции вам не нужно обновлять страницу, обновляется только часть компонента.

4. Ускорить сборку

1. Обновить версию

1.1 версия веб-пакета

Используйте последнюю версию веб-пакета, чтобы ускорить сборку с помощью собственных итеративных оптимизаций веб-пакета.

Это очень эффективно. Например, по сравнению с webpack4, в webpack5 добавлены оптимизации, такие как постоянное кэширование и улучшенные алгоритмы кэширования. Вы можете просмотреть новые функции webpack5.использованная литература.

1.2 Версия инструмента управления пакетами

Буду Node.js, инструменты управления пакетами (например,npm или yarn) до последней версии, что также помогает повысить производительность. Более новые версии строят более эффективные деревья модулей и повышают скорость синтаксического анализа.

Информация о версии, от которой зависит эта статья, выглядит следующим образом:

• webpack@5.46.0
• node@14.15.0
• npm@6.14.8

2. Кэш

2.1 cache

по конфигурациипостоянный кеш webpack cache: filesystem, для кэширования сгенерированных модулей и фрагментов веб-пакета, что повышает скорость сборки.

Проще говоря, поcache: filesystemШаблон веб-пакета процесса построения может быть кэширован, что значительно повышает скорость вторичного построения и упаковки.Когда построение внезапно прерывается и выполняется вторичное построение, его можно напрямую извлечь из кэша, что может ускорить90%о.

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    cache: {
      type: 'filesystem', // 使用文件缓存
    },
}

После внедрения кеша время первой сборки увеличится на 15%, а время второй сборки сократится на 90%.Эффект следующий:

2.2 длл ❌

существуетпроизводительность сборки официального веб-сайта webpackСм. введение о dll в:

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

Я взволнованно начал искать соответствующие инструкции по настройке dll, это было слишком сложно, а затем я нашел плагин, который помогает настроить dllautodll-webpack-plugin, в итоге выше прямо написано, что штатный постоянный кеш webpack5 - лучшее решение, чем dll.

Поэтому настраивать dll больше не нужно, а представленный выше кеш явно более пахучий.

2.3 кеш-загрузчик ❌

Вот так,cache-loaderНет нужды его представлять, вышеописанный кеш нам уже помог кешировать.

3. Уменьшить загрузчик и плагины

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

3.1 Указать включить

Указание include для загрузчика сужает область применения загрузчика до минимального количества необходимых модулей.

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

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

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    rules: [
        {
            test: /\.(js|ts|jsx|tsx)$/,
            include: paths.appSrc,
            use: [
              {
                loader: 'esbuild-loader',
                options: {
                  loader: 'tsx',
                  target: 'es2015',
                },
              }
            ]
         }
    ]
}

После определения включения загрузчика время сборки сократится на 12%, эффект следующий:

3.2 Управление ресурсами

использоватьмодуль ресурсов веб-пакета(модуль ресурсов) для замены старого загрузчика ресурсов (например,file-loader/url-loader/raw-loaderд.), уменьшая количество конфигураций загрузчика.

Конфигурация выглядит следующим образом:

module.exports = {
    rules: [
       {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        include: [
          paths.appSrc,
        ],
        type: 'asset/resource',
      },
    ]
}

После введения ресурсного модуля время сборки сократится на 7%, а эффект будет следующим:

4. Оптимизация конфигурации разрешения

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

4.1 alias

можно создать псевдонимimport или requireПсевдоним для упрощения импорта модулей.

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    resolve: {
        alias: {
          '@': paths.appSrc, // @ 代表 src 路径
        },
    }
}

4.2 extensions

extensions представляет собой список типов файлов, которые необходимо проанализировать.

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

Поскольку порядок синтаксического анализа веб-пакета слева направо, наиболее часто используемые типы файлов должны быть размещены слева, как показано ниже.tsxна крайнем левом.

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    resolve: {
        extensions: ['.tsx', '.js'], // 因为我的项目只有这两种类型的文件，如果有其他类型，需要添加进去。
    }
}

4.3 modules

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

Указание каталога сужает синтаксический анализ веб-пакетов и ускоряет сборку.

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    modules: [
      'node_modules',
       paths.appSrc,
    ]
}

4.4 symlinks

Если проект не использует символические ссылки (например.npm link или yarn link), вы можете установитьresolve.symlinks: false, уменьшая нагрузку на синтаксический анализ.

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    resolve: {
        symlinks: false,
    },
}

После оптимизации конфигурации разрешения время сборки сократится на 1,5%, а эффект будет следующим:

5. Многопроцессорность

Из приведенного выше видно, что время сборки sass-loader составляет 1,56 с, что составляет 60% всего процесса сборки.Есть ли способ ускорить скорость сборки sass-loader?

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

5.1 thread-loader

пройти черезthread-loaderЗапускайте трудоемкие загрузчики в отдельном пуле рабочих процессов, чтобы ускорить сборку загрузчиков.

Установить:

npm i -D thread-loader

webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
    rules: [
        {
        test: /\.module\.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          {
            loader: 'thread-loader',
            options: {
              workerParallelJobs: 2
            }
          },
          'sass-loader',
        ].filter(Boolean),
      },
    ]
}

Официальный сайт WebPackупомянулnode-sassСуществует ошибка с блокировкой потоков из пула потоков Node.js. когда используешьthread-loader, вам нужно установитьworkerParallelJobs: 2.

После введения загрузчика потоков для запуска нового процесса узла требуется около 0,6 с, а объем кода в этом проекте невелик.Видно, что после введения загрузчика потоков время сборки увеличилось на 0,19 с.

Поэтому мы должны вводить thread-loader только перед очень трудоемкими загрузчиками.

Эффект следующий:

5.2 хэппипак ❌

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

6. Дифференцируйте окружающую среду

существуетПуть к изучению Webpack5 (Практика) - глава режимаВстроенные оптимизации для различных режимов WebPack были введены.

В процессе разработки не используйте в среде разработки инструменты, которые используются только в производственной среде.Например, в среде разработки это следует исключить.[fullhash]/[chunkhash]/[contenthash]и другие инструменты.

Точно так же в производственной среде следует избегать инструментов, которые используются только в среде разработки, таких как плагины, такие как webpack-dev-server.

7. Другие

7.1 devtool

разные devtoolнастройки, приведет к различиям в производительности.

В большинстве случаев оптимальным вариантом являетсяeval-cheap-module-source-map.

Подробное различие можно найти наwebpack devtoolПроверить.

webpack.dev.jsКонфигурация выглядит следующим образом:

export.module = {
    devtool: 'eval-cheap-module-source-map',
}

7.2 Выходной результат не содержит информации о пути

По умолчанию webpack генерирует информацию о пути в выходном пакете. Удаление информации о пути может немного повысить скорость сборки.

module.exports = {
    output: {
        pathinfo: false,
      },
    };
}

В-четвертых, уменьшить объем упаковки

1. Сжатие кода

Первым шагом в оптимизации объема является сжатие кода и сжатие JS, CSS и других файлов с помощью плагина webpack.

1.1 JS-сжатие

использовать TerserWebpackPluginдля сжатия JavaScript.

webpack5 поставляется с последнейterser-webpack-plugin, ручная установка не требуется.

terser-webpack-pluginвключено по умолчаниюparallel: trueКонфигурация, количество одновременных запусков по умолчанию:os.cpus().length - 1, количество параллелей, настроенных в этой статье, равно 4, и несколько процессов используются для одновременного запуска сжатия для повышения скорости сборки.

webpack.prod.jsКонфигурация выглядит следующим образом:

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
              parallel: 4,
              terserOptions: {
                parse: {
                  ecma: 8,
                },
                compress: {
                  ecma: 5,
                  warnings: false,
                  comparisons: false,
                  inline: 2,
                },
                mangle: {
                  safari10: true,
                },
                output: {
                  ecma: 5,
                  comments: false,
                  ascii_only: true,
                },
              },
            }),
        ]
    }
}

Громкость уменьшается на 10%, а эффект следующий:

1.1 ParallelUglifyPlugin ❌

Возможно, вы слышали о плагине ParallelUglifyPlugin, который может помочь нам сжимать JS в нескольких процессах.Плагин TerserWebpackPlugin из webpack5 по умолчанию включает многопроцессорность и кэширование, поэтому нет необходимости вводить ParallelUglifyPlugin.

1.2 CSS-сжатие

использоватьCssMinimizerWebpackPluginСжатие файлов CSS.

а такжеoptimize-css-assets-webpack-pluginв сравнении с,css-minimizer-webpack-pluginИспользование строк запроса в исходных картах и ​​ресурсах является более точным и поддерживает кэширование и запуск в параллельном режиме.

CssMinimizerWebpackPluginФайлы CSS будут искать, оптимизированы, заминированы во время сборки WebPack.

Установить:

npm install -D css-minimizer-webpack-plugin

webpack.prod.jsКонфигурация выглядит следующим образом:

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
          parallel: 4,
        }),
    ],
  }
}

Поскольку CSS по умолчанию помещается в файлы JS, этот пример основан на эффекте разделения кода CSS в следующем разделе.

2. Разделение кода

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

2.1 Извлечение повторяющегося кода

SplitChunksPluginПлагин работает «из коробки» и может извлекать общие зависимые модули в существующий фрагмент записи или во вновь созданный фрагмент.

webpack автоматически разбивает чанки на основе следующих условий:

• Новые фрагменты могут быть общими, или модули изnode_modules папка;
• Размер нового фрагмента превышает 20 КБ (размер до min+gz);
• При загрузке чанков по запросу максимальное количество параллельных запросов меньше или равно 30;
• При загрузке страницы инициализации максимальное количество одновременных запросов меньше или равно 30;

Общие библиотеки, такие как react, извлекаются через splitChunks, а занятый том повторно не вводится.

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

webpack.prod.jsКонфигурация выглядит следующим образом:

module.exports = {
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      // 重复打包问题
      cacheGroups:{
        vendors:{ // node_modules里的代码
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          // name: 'vendors', 一定不要定义固定的name
          priority: 10, // 优先级
          enforce: true 
        }
      }
    },
}

Публичные модули упаковываются отдельно и не будут повторно импортироваться.Эффект следующий:

2.2 Разделение файлов CSS

MiniCssExtractPluginПлагин извлекает CSS в отдельные файлы, создает файл CSS для каждого файла JS, содержащего CSS, и поддерживает загрузку CSS и SourceMaps по запросу.

Установить:

npm install -D mini-css-extract-plugin

webpack.common.jsКонфигурация выглядит следующим образом:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
        {
        test: /\.module\.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          'style-loader',
          isEnvProduction && MiniCssExtractPlugin.loader, // 仅生产环境
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          {
            loader: 'thread-loader',
            options: {
              workerParallelJobs: 2
            }
          },
          'sass-loader',
        ].filter(Boolean),
      },
    ]
  },
};

Примечание: minicssextractplugin.loader, чтобы положить обратно-погрузчик.

Эффект следующий:

2.3 Минимизируйте входные фрагменты

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

webpack.prod.jsКонфигурация выглядит следующим образом:

module.exports = {
    optimization: {
        runtimeChunk: true,
      },
    };
}

Эффект следующий:

3. Сотрясение дерева

Встряхивание дерева, как следует из названия, означает стряхивание желтых листьев, оставляя на дереве только живые листья. Увядшие листья представляют собой бесполезный код, на который нет ссылок в проекте, а живые листья представляют исходный код, фактически используемый в проекте.

3.1 JS

JS Tree ShakingУдалите мертвый код из контекста JavaScript с помощьюpackage.json из "sideEffects"Атрибут действует как маркер, предоставляя компилятору подсказки о том, какие файлы в проекте являются «чистыми (чистые модули ES2015)», чтобы можно было безопасно удалить неиспользуемые части файлов.

Dead Code обычно имеет следующие характеристики:

• Код не будет выполнен и недоступен;
• Результат выполнения кода использоваться не будет;
• Код влияет только на мертвые переменные (только запись, не чтение).

3.1.1 webpack5 sideEffects

через package.json"sideEffects"свойство для достижения этого.

{
  "name": "your-project",
  "sideEffects": false
}

Следует отметить, что когда код имеет побочные эффекты, его необходимоsideEffectsВместо этого предоставьте массив, добавив пути к файлам побочного кода:

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js"]
}

После добавления TreeShaking нессылочный код не будет упакован, и эффект будет следующим:

3.1.2 Оптимизация ссылок библиотеки компонентов

webpack5 sideEffects может только очистить ссылки без побочных эффектов, а ссылки с побочными эффектами можно сделать только путем оптимизации ссылокTree Shaking.

1. lodash

аналогичныйimport { throttle } from 'lodash'Это ссылка с побочными эффектами, и весь файл lodash будет упакован.

Оптимизированный способ заключается в использованииimport { throttle } from 'lodash-es'заменятьimport { throttle } from 'lodash',lodash-esБудуLodashБиблиотека экспортируется какESМодули, поддержка встряхивания дерева на основе модулей ES и внедрение по запросу.

2. ant-design

ant-designПо умолчанию поддерживается встряхивание деревьев на основе ES-модулей, для js-части это напрямую вводитсяimport { Button } from 'antd'Это будет иметь эффект загрузки по требованию.

Если в проект введено всего несколько компонентов,import { Button } from 'antd'Это также побочный эффект, веб-пакет не может встряхивать другие компоненты. В это время вы можетесузить ссылкуЭто будет введено для измененияimport { Button } from 'antd/lib/button'Для дальнейшей оптимизации.

3.2 CSS

Вышеупомянутая операция встряхивания дерева выполняется с кодом JS. Точно так же необходимо встряхнуть код CSS. Удаление бесполезного кода CSS во время упаковки может значительно уменьшить размер упакованного файла CSS.

использоватьpurgecss-webpack-pluginДля встряхивания дерева CSS.

Установить:

npm i purgecss-webpack-plugin -D

Поскольку CSS по умолчанию помещается в файл JS при упаковке, необходимо отделить плагин файла CSS с помощью веб-пакета.mini-css-extract-pluginИспользуйте вместе, сначала разделите файлы CSS, а затем выполните встряхивание дерева CSS.

webpack.prod.jsКонфигурация выглядит следующим образом:

const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const paths = require('paths')

module.exports = {
  plugins: [
    // 打包体积分析
    new BundleAnalyzerPlugin(),
    // 提取 CSS
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    // CSS Tree Shaking
    new PurgeCSSPlugin({
      paths: glob.sync(`${paths.appSrc}/**/*`,  { nodir: true }),
    }),
  ]
}

Чтобы протестировать описанный выше эффект сжатия CSS, я ввел много недопустимого кода CSS, поэтому эффект Tree Shake также очень очевиден, эффект выглядит следующим образом:

3. CDN

Выше приведена оптимизация конфигурации веб-пакета.С другой стороны, CDN также можно использовать для уменьшения размера пакета.

Основная цель введения CDN здесь — уменьшить объем упаковки, поэтому только часть больших статических ресурсов загружается вручную в CDN, а локальный путь импорта изменяется. Другой метод оптимизации CDN будет представлен в разделе «Ускорение загрузки» ниже.

Загрузите большие статические ресурсы в CDN:

• Шрифты: Сжатие и загрузка в CDN;
• Изображение: сжать и загрузить в CDN.

V. Увеличить скорость загрузки

1. Загрузка по требованию

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

Он используется следующим образом:

export default function App () {
    return (
        <div>
            hello react 111
            <Hello />
            <button onClick={() => import('lodash')}>加载lodash</button>
        </div>
    )
}

Эффект следующий:

2. кеш браузера

Кэширование браузера означает, что после входа на веб-сайт загруженные статические ресурсы кэшируются браузером.После повторного входа на веб-сайт кэшированные ресурсы будут загружены напрямую для увеличения скорости загрузки.

Webpack поддерживает создание хэш-идентификаторов на основе содержимого ресурса. При изменении содержимого ресурса будет создан новый хэш-идентификатор.

Настройте хэш пакета JS,webpack.common.jsКонфигурация выглядит следующим образом:

module.exports = {
  // 输出
  output: {
    // 仅在生产环境添加 hash
    filename: ctx.isEnvProduction ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
  },
}

Настройте хэш пакета CSS,webpack.prod.jsКонфигурация выглядит следующим образом:

module.exports = {
  plugins: [
    // 提取 CSS
    new MiniCssExtractPlugin({
      filename: "[hash].[name].css",
    }),
  ],
}

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

module.exports = {
  optimization: {
    moduleIds: 'deterministic',
  }
}

Настроив contenthash/hash, браузер кэширует неизмененные файлы и перезагружает только измененные файлы, что значительно увеличивает скорость загрузки.

3. CDN

Загрузите все статические ресурсы в CDN и ускорьте скорость загрузки через CDN.

webpack.common.jsКонфигурация выглядит следующим образом:

export.modules = {
output: {
    publicPath: ctx.isEnvProduction ? 'https://xxx.com' : '', // CDN 域名
  },
}

6. Сравнение до и после оптимизации

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

• адрес github до оптимизации
• Оптимизированный адрес на гитхабе

1. Развивайте скорость

Типы	первая сборка	Вторичная конструкция немодифицированного контента	Вторичная конструкция с измененным содержанием
До оптимизации	2.7s	2.7s	2.7s
Оптимизировано	2.7s	0.5s	0.3s

2. Объем упаковки

Типы	размер
До оптимизации	250 kb
Оптимизировано	231 kb

7. Резюме

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

С точки зрения ускорения времени сборки самое главное настроить кеш, что может сильно ускорить вторичную сборку.

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

С точки зрения ускорения загрузки важны загрузка по запросу, кэширование браузера и CDN.

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

Исходный код этой статьи:

• webpack Demo2 до оптимизации
• После оптимизации webpack Demo2

Надеюсь, это поможет вам, спасибо за чтение ~

Не забудьте поставить палец вверх, чтобы подбодрить меня, пополнить ❤️

Прекрасное прошлое

• Путь к изучению Webpack5 (базовый)
• Путь к изучению Webpack5 (Практика)

использованная литература

• Практика оптимизации производительности Tree-Shaking — принципы
• Практика оптимизации производительности Tree-Shaking — Практика
• 30 минут, чтобы освоить оптимизацию производительности Webpack
• Поиграйте с webpack и сделайте упаковку на 90% быстрее
• Позвольте вам подробно разблокировать серию Webpack (оптимизация)
• Новое в Webpack 5
• Усердно изученная конфигурация dll webpack может быть устаревшей