Я действительно в Webpack 5.

Webpack

Последняя статьяПервые пользователи новых функций Webpack 5 (1): установка и запуск", в котором сравниваются различия между Webpack 4 и Webpack 5 с точки зрения установки и запуска. В этой статье продолжайте объяснять новые функции Webpack 5.

Обработка модуля ресурсов

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

До Webpack 5 обычно использовали:

  • raw-loader импортирует файлы как строки

  • url-loader встраивает файлы в пакеты как URI данных

  • загрузчик файлов отправляет файлы в выходной каталог

Тип модуля ресурсов заменяет все эти загрузчики, добавляя 4 новых типа модулей:

  • актив/ресурс отправляет отдельный файл и экспортирует URL-адрес. Ранее реализовано с помощью файлового загрузчика.

  • assets/inline экспортирует URI данных актива. Ранее реализовано с помощью url-loader.

  • актив/источник Экспорт исходного кода актива. Ранее достигалось с помощью необработанного загрузчика.

  • актив автоматически выбирает между экспортом URI данных и отправкой отдельного файла. Ранее это было реализовано с помощью url-loader и настройки ограничений объема ресурсов.

веб-пакет4:

// 模块
   module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
      …………
        ]
      },
      {
        test:/\.(png|jpg|gif)$/,
        // 安装 url-loader  file-loader
        loader:'url-loader',
        options:{
          // 小于 8KB 转 base64
           limit:8*1024
        }
      }
    ]
  },

веб-пакет5:

// 模块
   module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
         ……………………
      },
      {
        test:/\.(png|jpg|gif)$/,
        // 通用资源类型
        type:'asset',
        // 现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：
        // 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
        // 自定义设置
        parser:{ 
         dataUrlCondition:{
            maxSize:8*1024
          }
        }
      }
    ]
  },

файловый кеш

Кэшируйте сгенерированные модули и фрагменты webpack для повышения скорости сборки. Кэш будет установлен на тип: «память» в режиме разработки и отключен в рабочем режиме.

cache: true совпадает с конфигурацией cache: { type: 'memory' }.

cache.type

cache.type устанавливает тип кеша в память или файловую систему.

'memory' | 'filesystem'

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

Параметр файловой системы для использования системы файлового кэша.

cacheDirectory

cacheDirectory определяет каталог кеша, по умолчанию это node_modules/.cache/webpack.

Параметр cache.cacheDirectory доступен только в том случае, если для cache.type установлено значение filesystem.

webpack.config.js

//  mode 工作模式
  mode:'development',

​  cache:{
    type:'filesystem',
    // 默认缓存到 node_modules/.cache/webpack 中
    // 也可以自定义缓存目录
    // cacheDirectory:path.resolve(__dirname,'node_modules/.cac/webpack')
  }

Эффект кэширования инкрементальной компиляции заметен, даже если содержимое изменено.

Лучшее встряхивание дерева

Техника встряхивания дерева, также известная как «встряхивание дерева».

Да, перевод такой прямой. Смысл тоже очень простойНеиспользованный экспорт не будет упакован.

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

Чтобы лучше проиллюстрировать этот принцип, я сделал анимацию.

Первый анимационный эффект всей сети.

Если коротко, то есть два модуля и четыре метода.

В модуле X используются метод B и метод C, импортированный из модуля Y, а собственный метод A в модуле X и метод D в модуле Y не используются. Несмотря на то, что он определен, поскольку он нигде не используется, он будет «встряхнут» во время процесса «встряхивания дерева».

Как использовать его в веб-пакете?

На самом деле это очень просто, если режим работы изменить на производственный, он будет автоматически включен.

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

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

Как настроить?

Добавлены опцииoptimization.usedExports и оптимизации.minimize, что означает включение встряхивания дерева и сжатия.

//  mode 工作模式
  mode: 'none', // production、development、none
  // production 生产环境，默认优化打包
  // none 不做任何操作

​  // usedExports:true 开启优化（树摇但保留代码）
  // minimize:true 开启压缩 (删除未使用代码)
  optimization:{
    usedExports:true,
    minimize:true
    // innerGraph: true,
  }

Далее мы используем простой код для сравнения:

index.js

import * as m1 from "./m1";
console.log(m1.m2.nu1)

m1.js

import * as m2 from './m2'
export function fun1(){
  console.log('1--11',m2.c);
}​

export function fun2(){
  console.log('1--22')
}​

export {m2}

m2.js

export function fun3(){
  console.log('2--33');
}​

export function fun4(){
  console.log('2--44')
}​

export const nu1 = 456
export const nu2 = 789

Для того же кода в результате упаковки веб-пакета 4 мы видим не только большой объем кода, но и избыточный код i = 789. Напротив, результат упаковки веб-пакета 5 невероятно лаконичен.

федерация модулей

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

Обычно это называетсямикро интерфейс. Была похожая статья раньшеЯ исправил микроинтерфейсы после случайного обновления Webpack.", вы можете посмотреть на это еще раз100 миллионовДалее, я не буду много объяснять здесь.

Но чтобы лучше проиллюстрировать этот принцип, я сделал анимацию. Не теряйте его, пожалуйста, попробуйте его внимательно.

Мировая премьера анимационных эффектов

Webpack 5, действительно ладан (●'◡'●).

Категории