vite 打包优化之手动分包

vite 打包优化之手动分包

前言

首先，我们要清楚为什么需要对工程进行分包。

浏览器在每次访问页面时，会根据文件指纹判断是从服务器下载还是读取缓存。
若每次对项目打包，都将所有内容打包在一起，例如经常更改的页面模块和类似于lodash这些不常更新的库，那么每次打包完毕后都会产生一个新的文件指纹。

用户浏览器在访问时则会因为文件指纹不同从而去服务器下载新的资源。

在这个过程中，那些不常更改、稳定的库，也会被重新下载一次。这样就加大了用户等待的时间。所以我们需要对工程进行分包进而优化浏览器加载时间。

什么是文件指纹

文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理。浏览器会根据文件指纹进而做出是去服务器重新下载，还是读取本地缓存的动作。

如何使用Vite做手动分包

自动分包和手动分包

在vite内，分为自动分包和手动分包。若我们使用动态导入，则会进行自动分包。

1
2
3
4
5
// 动态导入
import('lodash')

// 静态导入
import { createApp } from 'vue'
配置rollup

在vite的背后，用的是esbuild和rollup。前者负责开发环境，后者负责打包。现在我们需要影响打包结果，所以需要在vite.config.js中对rollup的manualChunks进行配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vite.config.js
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
        manualChunks: {
                lodash: [ 'lodash' ],
                vue: [ 'vue' ]
                // 当然也可以直接合并在一起
                // xxx: [ 'lodash' , 'vue' ]
            }
        }
    }
})

当然，我们也可以将manualChunks配置为一个函数，将node_modules中的内容打包在一起。

1
2
3
4
5
6
7
// id为所传入的依赖模块的id
manualChunks(id){
    if(id.includes('node_modules')){
        // 返回包名，这里可以自定义
        return 'vendor'
    }
}

总结

经过上述对vite的rollup进行配置后，我们将一些不会经常变动的第三方库打包在了一起。
这样每次在修改页面，打包部署后，用户访问时就不会从服务器下载那些打包在一起，没有更改的第三方库包，而是从浏览器读取本地缓存。从而加快了用户的访问速度。