Упаковка Webpack работает слишком медленно? Попробуйте Dllplugin

JavaScript Webpack
Упаковка Webpack работает слишком медленно? Попробуйте Dllplugin

Когда webpack собирает пакет, он иногда сталкивается с проблемой долгого времени упаковки Вот решение, позволяющее сделать упаковку гладкой как шелк~

1. Введение

При упаковке с помощью WebPack для некоторых сторонних библиотек, которые редко обновляются, напримерreact,lodash,vueМы хотим отделиться от собственного кода, у сообщества Webpack есть два варианта

  • CommonsChunkPlugin
  • DLLPlugin

дляCommonsChunkPlugin, webpack фактически должен иметь дело с этими сторонними библиотеками каждый раз, когда он упакован, но после упаковки он может отделить сторонние библиотеки от нашего собственного кода. а такжеDLLPluginОн может полностью отделять сторонний код, то есть каждый раз упаковывается только код самого проекта. Концепция Dll заимствована из dll системы Windows. Пакет dll — это чистая зависимая библиотека, которая не может работать сама по себе и используется для ссылки на ваше приложение.

2. Простое использование шаблона webpack

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

  • webpack.config.js
  • webpack.dll.config.js

Создайте новый файл webpack.dll.config.js в корневом каталоге проекта.

const path    = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
      vendor: ['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue']
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve('./dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

Это нужно для добавления используемых сторонних плагинов в вендор.Затем добавьте код в WebPack.config.js

plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json')
    })
  ]

<script type="text/javascript" src="./../vendor.dll.js"></script>

Затем добавьте команду быстрого доступа (build:dll) в файл package.json.

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build:dll": "webpack --config webpack.dll.config.js"
  },

При выполнении последнего пакета сначала выполняется команда npm run build:dll, которая будет сгенерирована в каталоге пакета.vendor-manifest.jsonфайл сvendor.dll.jsдокумент. При упаковке dll Webpack сделает индекс всех включенных библиотек и запишет его в файл манифеста, а код, который ссылается на dll (пользователь dll), должен только прочитать файл манифеста, когда он упакован.

повторно выполнитьnpm run buildУстановлено, что текущая скорость упаковки веб-пакетов составляет около 2-3 секунд, что намного быстрее, чем предыдущие 20 секунд.

3. Использование веб-пакета шаблона

Создайте webpack.dll.config.js в процессе сборки

содержание:

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    vendor: [
      'vue-router',
      'vuex',
      'vue/dist/vue.common.js',
      'vue/dist/vue.js',
      'vue-loader/lib/component-normalizer.js',
      'vue',
      'axios',
      'echarts'
    ]
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve('./dist', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

Рекомендуется добавить плагин сжатия кода, иначе пакет dll будет относительно большим.

Добавить конфигурацию после плагина в webpack.prod.conf.js

new webpack.DllReferencePlugin({
    manifest: require('../dist/vendor-manifest.json')
})

Добавьте ссылку на запись index.html в корневой каталог. <script type="text/javascript" src="./vendor.dll.js"></script>

Добавьте команды быстрого доступа в скрипт package.json. "build:dll": "webpack --config build/webpack.dll.config.js"

запустить, когда dll должна быть сгенерированаnpm run build:dll, то есть сгенерировать два файла в каталоге distvender-manifest.jsonа такжеvender.dll.js. Затем официально сгенерируйте продуктnpm run build:prodВ дополнение к генерацииwebpack.dll.config.jsУпакованные файлы, отличные от указанных в .

пытаясьvue-element-adminКогда DllPlugin был представлен в , было добавлено 20 упакованных элементов, и результаты тестирования были следующими: Оригинальное время упаковки:

Время упаковки после внедрения DllPlugin:

Видно, что время упаковки значительно сократилось~

4. Другой способ внешнего варианта

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

// webpack.prod.config.js
// 多余代码省略
module.exports = {
    externals: {
        'vue': 'window.Vue',
        'vuex': 'window.Vuex',
        'vue-router': 'window.VueRouter'
        ...
    }
}

// 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件
// html
<body>
    <script src="XXX/cdn/vue.min.js"></script>
    ......
</body>

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Ссылаться на:

  1. Использование DLL веб-пакета
  2. Используйте webpack.DllPlugin и webpack.DllReferencePlugin, чтобы решить проблему медленной упаковки webpack.
  3. документация веб-пакета
  4. DLL-функция Webpack

PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~

Категории