Vite打包优化

Freedom风间

已于 2023-07-26 17:07:07 修改

阅读量2.4k

点赞数

分类专栏： vite 文章标签： echarts javascript vue.js

于 2023-04-27 09:13:27 首次发布

本文链接：https://blog.csdn.net/ndbsa/article/details/128723943

版权

本文详细介绍了如何对Vite项目进行打包优化，包括针对Element-plus、Echarts、Vue、Lodash、Moment和xlsx的按需引入，文件目录结构优化，以及压缩策略。通过这些步骤，成功将主JS包从2.31MB减小到236.58KB，显著提升了项目性能。

摘要由CSDN通过智能技术生成

背景：

业务中发现我们的项目框架index主chunk有2mb大小，这大大影响了整个项目的性能，而且依赖引入比较冗余，所以再次进行打包优化。

分析：

首先我们安装插件

rollup-plugin-visualizer

运行run build插件对于我们的打包文件生成chunk关系图如下：
在这里插入图片描述
部分依赖文件如下：

dist 文件16.7mb
明显问题：部分Chunk包过大，chunk包没有分离归类，可以看到比较大的文件是 element相关，vue，echarts，moment，lodash，xlxs插件

接下来我们进行专门对几个较大依赖进行优化：

Element-plus：

在这里插入图片描述
可以看到我们这里的element包已经超过了1mb，非常大，但是其实很多的element的组建我们都没有使用到，所以我们需要让其按需引入使用到的组建及依赖,而不是像我们之前那样整个都导入到项目中。我们可以使用unplugin插件来实现按需引入的效果
解决办法：
使用element按需引入
删除main.ts中对elementPlus的引入
在这里插入图片描述
在vite中配置：

安装插件

unplugin-vue-components ，unplugin-auto-import

在vite.config内配置：

// 引入
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 配置
plugins: [
   vue(),
   AutoImport({
   
       resolvers: [
           ElementPlusResolver(),
       ],
   }),
   Components({
   
       resolvers: [
           ElementPlusResolver()
       ]
   }),

再次打包，查看element-plus
在这里插入图片描述
从原来的1.32mb缩小到了232.55kb（缩小83%）

如果使用到了element-icon则同理（由于element-plus将element-icon单独独立出来一个依赖，所以如果我们使用了icon还需同样配置一下）
下载插件unplugin-icons
Vite配置：

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

AutoImport({
   
   resolvers: [
       ElementPlusResolver(),
       // 自动导入图标组件
       IconsResolver({
   
           prefix: 'Icon',
       }