在 vite 工程化中手动分包

3月

本文最后更新于2024年03月14日，已经过了310天没有更新，若内容或图片失效，请留言反馈

项目搭建

我们使用 vite 搭建一个 vue3 工程，执行命令：
powershell 代码:
```
pnpm create vite vue3-demo --template vue-ts
```
安装 lodash 依赖包，下载依赖：
powershell 代码:
```
pnpm add lodash

pnpm install
```
完成后的工程目录结构是这样的：

业务场景

我们先首次构建打包，然后修改一下代码再打包，对比一下前后打包差异：

可以看到，代码改动后，index-[hash].js 的文件指纹发生了变化，这意味着每次打包后，用户就要重新下载新的 js，而这个文件里面包含了这些东西：vue、lodash、业务代码，其中像 vue、lodash 这些依赖包是固定不变的，有变动的只是我们的业务代码，基于这个点我们就可以在其基础上打包优化。

打包优化

我们需要在打包上优化两个点：

把第三方依赖库单独打包成一个 js 文件
把我们的业务代码单独打包成一个 js 文件

这块需要我们对 vite 工程化知识有一定的了解，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源，可以通过配置 build.rollupOptions.output.manualChunks 来自定义 chunk 分割策略。

更改 vite 配置

打开 vite.config.ts，加入配置项：

ts 代码:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
rollupOptions: {
  output: {
    manualChunks: {
      'vendor':['vue', 'lodash'], // 这里可以自己自定义打包名字和需要打包的第三方库
    }
  }
}
  }
})

执行打包命令，我们可以看到打包文件中多了一个 verdor-[hash].js 的文件，这个就是刚才配置分包的文件：
这样的好处就是，将来如果我们的业务代码有改动，打包的第三方库的文件指纹就不会变，用户就会直接读取浏览器缓存，这是一种比较优的解决办法：
但这样需要我们每次都手动填写第三方库，那也显得太呆了，我们可以把 manualChunks 配置成一个函数，每次去加载这个模块的时候，它就会运行这个函数，打印看下输出什么：

我们会发现依赖包都是在 node_modules 目录下，接下来我们就修改一下配置：

js 代码:

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

 // https://vitejs.dev/config/
 export default defineConfig({
plugins: [vue()],
build: {
 rollupOptions: {
   output: {
     manualChunks(id) {
       if (id.includes('node_modules')) {
         return 'vendor'
       }
     }
   }
 }
}
 })