Solution to the file too large when vite2 is packaged

vite2 is a very useful tool, but as the number of code increases, the files become larger and larger when packing, which makes it depressing.

Warning encountered while packing

Output file name/static/vendor. 806.03kb / brotli: skipped (large chunk)

Some chunks are larger than 500kb after minification. Consider:

Using dynamic import() to code-split the application
Use to improve chunking:
Adjust chunk size limit for this warning via .

Since some dependent packages are too large when packaging, you are prompted to perform configuration segmentation;

/guide/en/#outputmanualchunks

Find a solution

(Okay, the official website is in English, I can't understand it)
So I searched online and found a solution.https:///article/

   = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (('node_modules')) {
                    return ().split('node_modules/')[1].split('/')[0].toString();
                }
            }
          }
      }
    }
  }

After trying it, it can indeed be divided into multiple files, but the problem arises again. The files divided into two are large and small, and large files are acceptable, but a bunch of small files of several k are annoying to see, so I thought about it again and found that this is possible.

   build: {
      sourcemap: true,
      outDir: 'distp', //Specify the output path      assetsDir: 'static/img/', // Specify the storage path for generating static resources      rollupOptions: {
        output: {
          manualChunks(id) {
            if (('node_modules')) {
              const arr = ().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@kangc':
                case '@naturefw':
                case '@popperjs':
                case '@vue':
                case 'axios':
                case 'element-plus':
                  return '_' + arr[0]
                  break
                default :
                  return '__vendor'
                  break
              }
            }
          },
          chunkFileNames: 'static/js1/[name]-[hash].js',
          entryFileNames: 'static/js2/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        },
        brotliSize: false, // No statistics        target: 'esnext', 
        minify: 'esbuild' // Obfuscator, the file size is smaller after terser is built      }
    },

Ideas

Package them separately according to modules, package them independently, and package them in small modules, so that there will be no large number of small files.

Replenish

After continuous attempts, it was found that the editor of @kangc (@kangc/v-md-editor), that is, md, cannot be packaged separately, and will report an error.
Also, axios cannot be packaged separately, as an error will be reported.

 if (('node_modules')) {
              const arr = ().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@naturefw': // Natural frame                case '@popperjs':
                case '@vue':
                case 'element-plus': // UI library                case '@element-plus': // icon                  return '_' + arr[0]
                  break
                default :
                  return '__vendor'
                  break
              }
            }

These can be packaged separately, and we will talk about the others when encountering them.

This is the end of this article about the solution to excessive file size when vite2 is packaged. For more related content about excessive file size for vite2, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!