El archivo chunk-vendors.js del paquete Vue es demasiado grande, lo que provoca una solución de carga lenta de la página

prefacio

Como sugiere el nombre, chunk-vendors.jses un paquete que agrupa todos los módulos que no son propios, sino módulos de otras partes, se denominan módulos de terceros o módulos de proveedores.

En general, significa (y solo) /node_modulesque todos los módulos del directorio del proyecto empaquetarán /node_modulestodos los paquetes de terceros en formato chunk-vendors.js.

Concentrar todos los paquetes de terceros en un solo archivo naturalmente causará el problema de que el archivo sea demasiado grande.

solución

Opción 1: solución de complemento de compresión-webpack-plugin

• Instalarnpm install compression-webpack-plugin --save

// 引入compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin')

// 当前环境是vue.config.js 文件下的配置
chainWebpack: (config) => {
    
    
    config.plugin('compressionPlugin').use(new CompressionPlugin({
    
    
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 1024, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.3, // 压缩比
      }))
}

Solución 2 Utilice la optimización del paquete web para subempaquetar archivos grandes

 // 当前环境是vue.config.js 文件下的配置
 configureWebpack: config => {
    
    
     return {
    
    
     // 开启分离 js
     optimization: {
    
    
       runtimeChunk: 'single',
       splitChunks: {
    
    
         chunks: 'all',
         maxInitialRequests: Infinity,
         minSize: 20000,
         cacheGroups: {
    
    
           vendor: {
    
    
             test: /[\\/]node_modules[\\/]/,
             name(module) {
    
    
               // get the name. E.g. node_modules/packageName/not/this/part.js
               // or node_modules/packageName
               const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
               // npm package names are URL-safe, but some servers don't like @ symbols
               return `npm.${
      
      packageName.replace('@', '')}`
             }
           }
         }
       }
     }
   }
 }