vite 构建优化

先跑一下 vite 的构建脚本，如果有啥异常的时候，命令行会提示你这边的。

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

分析

为了更好分析，我们引入 rollup-plugin-visualizer 这个插件，在 vite.config.js 上修改

import { visualizer } from 'rollup-plugin-visualizer';
// ...
plugins: [
  visualizer(),
]

后面我们跑 build 命令的时候就会生成一个 stats.html 文件，打开就可以看到我们打包后的产物分布情况，就看哪些文件的体积较大了需要进行优化了。

第三方库压缩

一般是引入的第三方库比如element，echarts占比会比较大，，这个时候就要考了一下按需加载了，就不要全量引入了，按需加载后基本可以砍掉不少体积。

整体压缩

安装 vite-plugin-compression 插件

npm install vite-plugin-compression -D

在 vite.config.js 引入

import commpressPlugin from 'vite-plugin-compression';
// ...
plugins: [
    // ...
    commpressPlugin(),
]

下次打包的时候就会自动对产物进行 gzip 压缩了。

拆包

主要是出于优化缓存的考虑，有时候我们项目只是修改了一部分，如果没有拆包的话，用户需要下载整个文件。但是如果我们进行了拆包，用户只需要下载发生修改的文件，为修改可以直接读取缓存。还有一个按需加载的的一个策略。

构建速度优化

这部分就不需要考虑了吧，vite 使用原生ESM方式提供源码，浏览器需要的时候才进行转换动态转换，不会像webpack那样需要整个进行loader构建，项目体积再大也不会影响到构建速度的。

瓦雀