【转载~】使用vite进行打包优化

原文链接 点击去看~ https://www.cnblogs.com/jyk/p/16029074.html

使用vite 打包后提示

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
// 动态引入，按需加载的意思？
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
// 打包拆分，将打包分成多个小包，下面方法为此思路
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
// 修改警告的最大值 build.chunkSizeWarningLimit 设置即可

当出现这样的情况，按照提示顺序检查
1、是否按需引入了？
2、如果已经按需引入，是否因为一个包太大了？
3、将大包进行拆分
4、拆分完毕还是过大，可适当调整最大的警告值

打包分块 ：

vite.config.js文件

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

将所有文件拆分成小的文件，文件本身大小并没有变化，只是拆分

尝试了一下，确实可以分成多个文件，但是问题又来了，分成的文件有大有小，大文件可以接受，但是一堆几k的小文件看着就烦了，于是又想了想，发现可以这样。

 build: {
      sourcemap: true,
      outDir: 'distp', //指定输出路径
      assetsDir: 'static/img/', // 指定生成静态资源的存放路径
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              const arr = id.toString().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, // 不统计
        target: 'esnext', 
        minify: 'esbuild' // 混淆器，terser构建后文件体积更小
      }
    },

思路

按照模块分开打包，大模块独立打包，小模块合并打包，这样就不会出现一大堆小文件了。

补充

经过不断尝试发现，@kangc（@kangc/v-md-editor）也就是md的编辑器不能单独打包，会报错。
还有 axios 也不能单独打包，会报错。

	if (id.includes('node_modules')) {
		const arr = id.toString().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@naturefw': // 自然框架
                case '@popperjs':
                case '@vue':
                case 'element-plus': // UI 库
                case '@element-plus': // 图标
                  return '_' + arr[0]
                  break
                default :
                  return '__vendor'
				break
		  }
	 }