Блог

В настоящее время при создании одностраничного приложения Vue CLI будет создан единый блок поставщиков, содержащий все зависимости. Я ищу способ извлечения определенных зависимостей в отдельный файл поставщика, чтобы у вас было два. Итак, после сборки это будет выглядеть примерно так:

   dist/js/chunk-vendors.12344566.js          479.34 KiB                                                               
  dist/js/chunk-vendors-jquery.222e1476.js   138.17 KiB
  

Laravel mix, похоже, предоставляет аналогичную функциональность. Мне интересно, как это возможно в приложении Vue CLI.

Это делается с помощью splitChunks.cacheGroups конфигурации Webpack, которую можно задать в configureWebpack опции vue.config.js . В cacheGroups объекте определите «группы» для разделения определенных зависимостей:

 // vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vuetify: {
            // regex to compare against build resource by path name (e.g., `/node_modules/vuetify`)
            test: /vuetify/,

            // basename of output file
            name: 'chunk-vendors-vuetify'
          }
        },
      },
    },
  }
}