Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

@lauyu

已于 2023-02-08 09:50:26 修改

阅读量6.6k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2022-09-23 10:37:19 首次发布

本文链接：https://blog.csdn.net/qq_38287682/article/details/127005169

问题背景

最近在做一个Vue项目时，在打包上线的时候发现项目部署完第一次访问时间特别慢，整个登录页面加载用了8-10秒，很明显这个速度达不到项目上线的要求，于是开始了对项目打包之后增快加载速度的研究。
在这里插入图片描述
未优化前的项目加载时间，都在7秒以上，而且包文件特别大。

寻找问题及解决问题

先安装了webpack-bundle-analyzer工具，对打包文件大小进行分析监测。

//安装
npm install webpack-bundle-analyzer -S
//在vue.config.js文件中引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//在plugins中使用
plugins: [new BundleAnalyzerPlugin()]

通过对打包之后的文件大小进行分析,发现其中three.js,echarts等模块占用空间比较大，同时我对代码进行了排查，发现对这两个模块都是进行的全部引入，但是实际上很多东西都没有使用，于是我对这些模块进行删减，改为部分引入，从而减少包文件的大小，同时将一些没有使用的模块进行删除，从而优化整体包文件的大小。
在这里插入图片描述
经过以上模块删减之后，的确访问速度有了一些提升，但是效果不是明显，大概加快了1-2秒左右，对于这个系统来说肯定是还不够的，于是研究之后对打包之后的文件进行压缩。

安装compression-webpack-plugin工具，对打包之后的文件进行gzip压缩，同时配合nginx进行配置。

//安装工具
npm install compression-webpack-plugin -S
//引入工具
const CompressionPlugin = require('compression-webpack-plugin');
//使用工具
 plugins: [
            new CompressionPlugin({