Отключить отдельные куски для CSS, Vue Cli 3 Webpack 4

Question

Я использую проект, созданный с использованием последней версии Vue Cli 3. Я использую конфигурацию по умолчанию, Мой маршрутизатор имеет много динамически импортируемых маршрутов. И мои css и js разбиты на несколько частей во время работы в производстве. Пока поведение с js желательно. Мои css файлы довольно малы, я бы хотел отключить куски для css.

Как мне настроить webpack для этого через файл vue.config.js. Пожалуйста, помогите с точной командой, поскольку я нахожу конфигурацию webpack и синтаксис цепочки очень запутанным. Спасибо:)

Answer 1

1. Создайте файл в вашем корне проекта vue.config.js

Я тоже использую несколько других вариантов, но вам нужен именно этот.

const path = require('path');

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  chainWebpack: config => {
    config.optimization.delete('splitChunks')
  }
};

Это удалит созданные чанки и позволит вам использовать только один файл CSS так же как JS,

2. filenameHashing: false эта часть удалит хэширование файлов.
3. config.optimization.delete('splitChunks') это удалит куски.

Более конкретно с вашим требованием.

Используйте эти конфигурации

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  configureWebpack: {
    optimization: {
      cacheGroups: {
        default: false,
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

Таким образом, ваш JS-код будет разбит на куски, но CSS-файл будет объединен в один.

Более того, если вы хотите настроить свои чанки JS, вы можете использовать эти настройки.

module.exports = {
  lintOnSave: true,

  filenameHashing: false,
  configureWebpack:{
    optimization: {
      cacheGroups: {
        default: false,
        // Custom common chunk
        bundle: {
          name: 'commons',
          chunks: 'all',
          minChunks: 3,
          reuseExistingChunk: false,
        },
        // Customer vendor
        vendors: {
          chunks: 'initial',
          name: 'vendors',
          test: 'vendors',
        },
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

Answer 2

Для Webpack 4 вы можете увидеть этот пример (vue.config.js):

const WebpackBundleAnalyzer= require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  filenameHashing:false,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
       symlinks: false
    },
    optimization: {
      splitChunks: {
       cacheGroups: {
          app: {
            chunks: 'all',
            name: 'main',
            test: /[\\/]src[\\/](.*)[\\/]/,
          },
          flagIcons: {
            chunks: 'all',
            name: 'flagIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((flag).*)[\\/]/,
          },
          freeIcons: {
            chunks: 'all',
            name: 'freeIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((free).*)[\\/]/,
          },
          brandIcons: {
            chunks: 'all',
            name: 'brandIcons',                
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((brand).*)[\\/]/,
          },
          vendors: {
            chunks: 'all',
            name: 'vendors',
            test: /[\\/]node_modules[\\/]@coreui[\\/]((?!icons).*)[\\/]/,
          },
          // Merge all the CSS into one file
          styles: {
            name: 'styles',
            test: /\.s?css$/,
            chunks: 'all',
            minChunks: 1,
            reuseExistingChunk: true,
            enforce: true,
          }
        }
      }
    },

    plugins:[new WebpackBundleAnalyzer()]
  }
}

вы можете удалить "WebpackBundleAnalyzer" после того, как будете удовлетворены результатами.