Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

As funções específicas e informações de configuração de otimização.splitChunks podem ser verificadas online.

Aqui está uma breve introdução aos seus cenários de uso, funções e como usá-lo:

1. InútilsplitChunks Antes da subcontratação, todos os módulos são agrupados em um arquivo, portanto, quando o arquivo for grande o suficiente e a velocidade da rede for média, a primeira tela carregará muito lentamente. Conforme mostrado abaixo, esses três blocos serão carregados juntos ao entrar no projeto pela primeira vez:

2. Neste momento, usamos splitChunks para subcontratação e configuramos em vue.config.js. O código é o seguinte:

module.exports = {
  configureWebpack: {
    optimization: {
       splitChunks: {
	   chunks: 'all',
	   cacheGroups: {
	       libs: {
	         name: 'chunk-libs',
	         test: /[/]node_modules[/]/,
	         priority: 10,
	         chunks: 'initial' // only package third parties that are initially dependent
	       },
	       elementUI: {
	         name: 'chunk-elementUI', // split elementUI into a single package
	         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
	         test: /[/]node_modules[/]_?element-ui(.*)/ // in order to adapt to cnpm
	       },
	       commons: {
	         name: 'chunk-commons',
	         test: resolve('src/components'), // can customize your rules
	         minChunks: 3, //  minimum common number
	         priority: 5,
	         reuseExistingChunk: true
	       }
	   }
     }
   }
}

cacheGroupssimsplitChunksA configuração mais básica interna,splitChunksEssa é a basecacheGroupsPara dividir o módulo.
Após a conclusão da configuração, o módulo será subempacotado durante o empacotamento. Como mostrado abaixo:

Neste momento, ao entrar em uma determinada página e utilizar um determinado módulo, o pacote do módulo correspondente será carregado.Implementar carregamento sob demanda, o que pode otimizar bastante o problema de carregamento lento da primeira tela。