Этот вопрос проверяет знание оптимизаций, которые Webpack использует для создания компактной и быстрой сборки в продакшене.
Для сборки production Webpack использует режим production, который включает оптимизации: минификацию, tree shaking и генерацию контент-хэшей. Настройка включает разделение кода, оптимизацию стилей и изображений.
В режиме production Webpack автоматически включает оптимизации, направленные на уменьшение размера и повышение производительности:
Минификация JavaScript: Используется TerserPlugin для удаления неиспользуемого кода и сокращения синтаксиса.
Tree shaking: Удаляет мёртвый код.
Оптимизация CSS: С помощью MiniCssExtractPlugin и минификаторов, таких как css-minimizer-webpack-plugin.
Разделение кода: Использование SplitChunksPlugin для выделения общих модулей.
Оптимизация изображений: Сжатие графики через плагины.
Пример конфигурации:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
output: {
filename: '[name].[contenthash].js', // Контент-хэши для кэширования
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin()],
splitChunks: {
chunks: 'all',
},
,
plugins: [
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
],
};Это создаёт оптимальную сборку для продакшена с минимальным размером и максимальной скоростью загрузки.