В чем разница между webpack5 и webpack4?

внешний интерфейс Webpack

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

Роль: Если в нашем проекте представлен пакет lodash, но у меня есть только один из методов. Являются ли другие неиспользуемые методы излишними? На этом этапе встряхивание дерева может удалить бесполезные вещи, чтобы уменьшить окончательный размер пакета.

usedExports : true, помечать неиспользуемые листья

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

  // webpack.config.js中
  module.exports = {
     optimization: {
       usedExports: true, //只导出被使用的模块
       minimize : true // 启动压缩
     }
  }

Поскольку встряхивание дерева поддерживает только esmodule, если вы упаковываете commonjs, встряхивание дерева будет недействительным. Однако в настоящее время все используют vue, react и другие фреймворки.Все они скомпилированы с помощью babel-loader.Следующая конфигурация может гарантировать, что это должен быть esmodule

image.png

Mode="production" webpack5 автоматически включает встряхивание дерева.

2. Сжатый код

1.webpack4

Плагин terser-webpack-plugin необходимо загрузить и установить на webpack4, и требуется следующая конфигурация:

const TerserPlugin = require('terser-webpack-plugin')

module.exports = { 
// ...other config
optimization: {
  minimize: !isDev,
  minimizer: [
    new TerserPlugin({
      extractComments: false, 
      terserOptions: { 
        compress: { 
          pure_funcs: ['console.log'] 
        }
      }
    }) ]
 }
2.webpack5

У него есть собственная внутренняя функция сжатия js, а также встроенный подключаемый модуль terser-webpack-plugin, поэтому нам не нужно его загружать и устанавливать. И когда режим = «производство», функция сжатия js будет автоматически включена.

Если вы хотите использовать его в среде разработки, используйте следующее:

  // webpack.config.js中
  module.exports = {
     optimization: {
       usedExports: true, //只导出被使用的模块
       minimize : true // 启动压缩
     }
  }
3.js проблема сбоя сжатия

Когда вы загрузите оптимизацию-css-assets-webpack-plugin и выполните сжатие css, вы обнаружите, что функция сжатия js по умолчанию для webpack5 недействительна. Поговорим о настройке оптимизации-css-assets-webpack-plugin:

npm install optimize-css-assets-webpack-plugin -D

module.exports = { 
  optimization: { 
    minimizer: [ 
      new OptimizeCssAssetsPlugin() 
    ]
  },
}

В настоящее время плагин сжатия optimize-css-assets-webpack-plugin можно настроить в плагинах или в оптимизации, как показано на рисунке. Разница заключается в следующем:

Настроил в плагинах, тогда плагин будет работать в любом случае. И конфигурация в оптимизации означает, что она будет работать только тогда, когда для минимизации установлено значение true.

После установки плагина optim-css-assets-webpack-plugin вы обнаружите, что файлы js, которые раньше можно было сжать, теперь нельзя сжать. Причина в том, что указанный вами компрессор

Оптимизация-css-assets-webpack-plugin приводит к сбою terser-webpack-plugin по умолчанию. Решение выглядит следующим образом:

npm install terser-webpack-plugin -D

 optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: { pure_funcs: ['console.log'] },
        },
      }),
      new OptimiazeCssAssetPlugin(),
    ]
  },

Даже в webpack5 вы должны использовать минификацию js, как в webpack4.

4. Меры предосторожности

Использование optimise-css-assets-webpack-plugin в webpack5 снова сообщит об ошибке, потому что официальный сайт планировал отменить его, пожалуйста, используйте альтернативу:

npm i css-assets-webpack-plugin -D

3. Объединить модули

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

optimization.concatenateModules = true

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

module.exports = {
  optimization: {
    usedExports: true,
    concatenateModules: true,
    minimize: true
  }
}

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

4. Побочные эффекты

В webpack4 добавлена ​​функция sideEffects, которая позволяет нам настраивать, имеет ли наш код побочные эффекты или нет.

Эта функция используется только при разработке пакетов npm.

Объяснение побочных эффектов: В папке utils есть файл index.js, который используется для того, чтобы система экспортировала другие файлы в utils.Эффект в том, чтобы писать меньше.Независимо от того, сколько методов в utils, мне нужно только импортные утилиты.

// utils/index.js
  export * from './getXXX.js';
  export * from './getAAA.js';
  export * from './getBBB.js';
  export * from './getCCC.js';


 // 在其他文件使用 getXXX 引入
  import {getXX} from '../utils'

Что делать, если файл getBBB не используется во внешнем мире и древовидная тряска не может избавиться от него? Это getBBB является побочным эффектом. Вы можете спросить, почему встряхивание деревьев ничего не может с ним сделать? Причина в том, что он использует его в utils/index.js. Можно включить только функцию побочных эффектов. следующим образом:

// package.json中
{
  name：“项目名称”,
  ....
  sideEffects: false
}


// webpack.config.js

module.exports = {
  mode: 'none',
  ....
  optimization: {
    sideEffects: true
  }
}

Включены побочные эффекты:

(1) Optimization.sideEffects = true включает побочные эффекты

(2) Установите sideEffects: false в package.json, чтобы пометить все модули без побочных эффектов.

Примечание: перед упаковкой webpack проверит флаг sideEffects в файле package.json, к которому относится проект, если побочных эффектов нет, неиспользуемые модули не нужно упаковывать, и наоборот. На этом этапе включите sideEffects в webpack.config.js.

5. кеш веб-пакета

1. конфигурация кеша webpack4

Поддержка кэширования в памяти

npm install hard-source-webpack-plugin -D

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') 

module.exports = { 
plugins: [
  // 其它 plugin... 
  new HardSourceWebpackPlugin(), 
] }
2. конфигурация кеша webpack5

webpack5 имеет встроенный механизм кэширования кеша. Вы можете настроить его напрямую.

Кэш будет установлен на тип: память в режиме разработки и отключена в рабочем режиме.

// webpack.config.js
module.exports= {
  // 使用持久化缓存
  cache: {
    type: 'filesystem'，
    cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')
  }
}

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

Настройка cacheDirectory вступает в силу только в том случае, если type=filesystem. Где кеш для настройки нужных вещей?

6. Оптимизация загрузчика

webpack 4 требует разных загрузчиков для загрузки ресурсов

  • raw-loader импортирует файлы как строки
  • url-loader встраивает файлы как URL-адреса данных в файлы пакетов
  • загрузчик файлов отправляет файлы в выходной каталог

image.png

Тип модуля ресурсов webpack5 заменяет загрузчик

  • актив/ресурс заменить файл-загрузчик (отправлять отдельные файлы)
  • актив/встроенный заменить URL-загрузчик (URL-адрес экспорта)
  • актив/источник заменить raw-loader (исходный код экспорта)
  • asset

image.png

webpack5

7. Отличия запуска сервисов

1. webpack4 запускаем сервис

Запустите сервис через webpack-dev-server

2. webpack5 запускает службу

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

8. Федерация модулей (микро-интерфейсы)

webpack может реализовывать ссылки между приложениями и приложениями.

9. Отличие devtool

sourceMap необходимо настроить непосредственно в webpack.config.js devtool Этого можно добиться. И devtool имеет много значений параметров, разные значения параметров, разные файлы .map, созданные с разными параметрами, разную скорость упаковки.

Обычно мы используем «cheap-eval-module-source-map» в конфигурации среды разработки и «none» в производственной среде.

Devtool также отличается в webpack4 и webpack5.

v4: devtool: 'cheap-eval-module-source-map'

v5: devtool: 'eval-cheap-module-source-map'

10. Разница в горячем обновлении

настройки веб-пакета4

image.png

настройка веб-пакета5

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

  module.hot.accept('需要热启动的文件',(source)=>{
     //自定义热启动
  })

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

Если вы введете плагин mini-css-extract-plugin, вы обнаружите, что горячее обновление стиля также не удастся.

Вы можете использовать style-loader только в среде разработки и MinicssExtractPlugin.loader в производственной среде. следующим образом:

image.png

11. Отличия использования webpack-merge

импорт webpack4

const merge = require('webpack-merge);

импорт веб-пакета 5

const {merge} = require('webpack-merge');

12. Отличия использования copy-webpack-plugin

//webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    // webpack 4
    new CopyWebpackPlugin(['public']),
    
    // webpack 5
    new CopyWebpackPlugin({
      patterns: [{
        from: './public',
        to: './dist/public'
      }]
    })
  ]
}

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

Категории