总结自己vue项目的打包优化，性能优化的过程

距离上次的项目总结差不多有一个月了,一直没时间来总结项目的优化，项目用的框架是vite4+vue3

安装分析图表rollup-plugin-visualizer

首先我们想优化项目，第一步要看看我们打包出来的体积占比，哪里占比大需要优化的，vite项目用的是这个rollup-plugin-visualizer，webpack用的是webpack-bundle-analyzer，运行npm run build --report，安装完后去vite.config.ts中的plugins配置一下，成功打包之后会自动出现分析图表

分析图表：

我这个项目打包出来有3.7m，正常来说项目打包出来的体积会小于1m，所以才需要去优化打包的体积，从这个图表可以看出我的项目基本都是element-plus和echarts占用的体积是比较大的，哦，对了，顺便说一个点，优化项目中的一些图片，一开始我的项目图片是放在静态文件下的，这也造成打包出来的项目体积过大，所以在开发项目的时候有图片或者视频之类的找后端帮我们挂载到服务器上直接以url的形式去访问，这大大减小了我们的打包体积。接下来就说说怎么去优化element-plus和echarts：

1.1 一开始我的项目element-plus是全局引入的，现在全部删掉，什么是全局引入，在main.ts中import ElementPlus from 'element-plus和app.use(ElementPlus),现在可以把它们删了，安装unplugin-auto-import和unplugin-vue-components插件，然后一样去vite.config.ts中配置，如下图：

这两个插件会帮你自动按需引入element-plus所需要的组件，比如el-table这些标签，但是其他类似图表的还需要在使用的页面引入才能正常使用，再重新打包一下，发现element-plus这个模块的体积差不多少了1m。

echarts优化也是跟element-plus的逻辑思想，按需引入，直接照搬官网的做法，以下是官网地址： echarts.apache.org/handbook/zh…

最后打包出来echarts也少了1.5m左右，但是还是占用差不多1m的体积，如果你很在意这个，那就用cdn引入，但是cdn引入存在不稳定性，cdn崩了，项目也就跟着崩了，看个人需求吧。其实占用打包体积最主要的还是我们用的一些工具库，就像我项目中还有其他的插件，@kjgl77/datav-vue3、lodash库就用lodash-es等等。

打包配置优化

在vue-cli中移除console，是要下载babel-plugin-transform-remove-console插件。 但是在vite中已经内置了移除console的设置了，很简单只需要配置一下就行了，对了，这里有很重要的一点，当你minfiy是terser的时候，必须要安装一下terser这个依赖

性能优化

性能优化其实说白了就是我们的首屏加载的优化，这就是大大关乎到用户体验感的，上面的打包优化虽然说大大减少了打包的体积，但是对于性能来说其实影响不大，对于我的理解，性能优化有以下几点比较重要的：

1.SSR服务端渲染

对于首屏加载来说，SSR服务端渲染是最好的，这个所有资源都是在服务器加载完成才返回到前端，但是也无疑加重了服务器的压力，其实用到SSR还有重要的一点就是搜索引擎优化。

2.路由懒加载

在我们配置路由的时候用到路由懒加载也会大大提高我们的性能，因为项目属于单页面的，他必须加载完所有资源才会显示，当我们还未进入到其他路由的时候不请求其他路由的资源，只加载当前页面的资源。以下这个引入方式就是路由懒加载：

3.代码的优化

我觉得代码层面也会影响到性能，我在项目中深有体会，一开始没想太多，很多弹窗的隐藏显示都是用v-show去控制，后来开始优化项目的时候，去netword中查看页面资源加载的时候发现弹窗还没显示的时候，我的资源就已经加载出来了，后面全部换成v-if的时候发现它就没有加载了，因为v-show是占用位置的。 还有一些搜索框的优化，滚动优化都会用上一些防抖节流。最重要的是组件的封装重复利用，这是项目必不可少的，到时候我还会总结一下element-plus中的表格表单二次封装、axios请求的封装等等。

4.gzip压缩

gzip 是一种使用非常普遍的压缩格式。使用 gzip 压缩可以大幅减小代码体积，提升网络性能，在优化的时候在网上也看了很多文章，都说gzip的效果比较明显，自己也体验了一把，体积确实变小了很多，但是这个还需要后端配合配置一下nginx，往往牛逼的小伙伴自己部署项目自己配置，我就是小菜鸡，前端开启 gzip 也比较简单，使用一个插件就可以了： pnpm i -D vite-plugin-compression

然后去配置文件中import viteCompression from 'vite-plugin-compression'

在plugins配置一下viteCompression()

5.用户体检

使用骨架屏，项目中我没用到，所以不说了。

使用loading旋转小图标，请求拦截的时候开启小图标，到响应拦截的时候关闭，这个可以用element-plus中的ElLoading，开启如下图，关闭 ElLoading.service().close()

使用nprogress，安装依赖并在路由守卫中导入，在进入前nProgress.start(),进入后nProgress.done()

以上就是我自己的一个项目优化的小总结，希望各位大佬可以指点指点，虚心请教。对了，现在这个项目在我本地跑测试的时候第一次进入还是很久很久，但是我在其他同事电脑上跑我提供的局域网地址却非常神速，项目还未上线，会不会是我电脑问题？求大神解答