关于Vite后台项目的打包优化(首屏加载)

前言

主要应该是后台使用后台功能多了体积会越来越大

代码层面的优化

合理使用treeShaking

js 复制代码

// 这样可以利用treeshaking
import { someField } from 'xxx.json';

// 这样是不会有treeShaking
import allData from 'xxx.json';
allData.someField;

动态import(懒加载)

scss 复制代码

() => import('/xxxxx.vue')
defineAsyncComponment(xxxx)

//react
React.lazy(() => import('xxxx.tsx'))

不多赘述这样会单独打包出来一个文件

build配置

这里使用真实项目来配置 gitee.com/dapppp/ruoy...

首先是gzip 这个肯定要加

js 复制代码

// 支持gzip压缩
import viteCompression from 'vite-plugin-compression';

viteCompression({
  verbose: true,
  disable: false,
  threshold: 10240,
  algorithm: 'gzip',
  ext: '.gz',
}),

压缩完体积还是挺可观的

然后是rollupOptions配置了

js 复制代码

output: {
  assetFileNames: '[ext]/[name]-[hash].[ext]',
  chunkFileNames: 'js/[name]-[hash].js',
  entryFileNames: 'jse/index-[name]-[hash].js',
},

这里其实对体积没有影响只是会打包到固定的目录

使用 停用缓存+4G 来模拟线上第一次打开

请求48 首屏2.6M资源 4.4S

还有优化空间吗通过对网络请求的分析发现有很多碎片文件

浏览器不可能一次获取而且模块之间也有依赖关系这些碎片文件占用了连接数怎么优化呢

js 复制代码

output: {
  assetFileNames: '[ext]/[name]-[hash].[ext]',
  chunkFileNames: 'js/[name]-[hash].js',
  entryFileNames: 'jse/index-[name]-[hash].js',
  experimentalMinChunkSize: 20 * 1024,
},

使用这个配置experimentalMinChunkSize 尽可能将碎片文件打包在一起 rollup - experimentalMinChunkSize

为什么说是尽可能呢因为文档指出包含副作用模块是不会打包在一起的像上面的动态import文件尽管文件很少也不会被打包

再次打包看看

请求数 48 - 30

资源 2.6 - 2.8 (因为一些额外的也打包进来了)

加载时间 4.4S - 2.5S 起飞!

可以看到虽然体积增加了加载速度还更快了