Vite中手动分包优化

手动分包Vite

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
build:{
  rollupOptions:{
    output:{
      manualChunks:{
        vendorName:['vue','vue-router']
      }
    }
  }
 }
})

分包的好处是，可以将一些公共的依赖打包到一个文件中，这样可以减少重复的代码，提高代码的复用性。

将公共的依赖放在同一个文件，将来依赖没有改变的时候，公共文件指纹是不变的

用户可以利用浏览器缓存机制，仅更新修改的文件。

将nodemodules文件都打入公共包

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  // 手动分包
 build:{
  rollupOptions:{
    output:{
      manualChunks(id){
        if(id.includes('node_modules')){
          return 'vendor'
        }
      }
    }
  }
 }
})