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

news2025/1/25 4:29:38

问题背景

最近在做一个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({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            }),
        ]

安装工具的时候可以会出现以下报错，大概意思呢就是说你的webpack版本和这个工具的版本不匹配，只要在安装工具的时候指定一下版本或者在安装命令后面加上 --legacy-peer-deps 这个语句，就能解决这个问题。

–legacy-peer-deps的作用
在NPM v7中，现在默认安装peerDependencies。

在很多情况下，这会导致版本冲突，从而中断安装过程。

–legacy-peer-deps标志是在v7中引入的，目的是绕过peerDependency自动安装；它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: shopcar-demo@0.1.0
npm ERR! Found: webpack@5.72.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.8.0" from @vue/cli-service@5.0.4
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0 || ^5.0.0-0" from @vue/cli-plugin-babel@5.0.4
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~5.0.0" from the root project
npm ERR!       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR!   webpack@"^5.54.0" from @vue/cli-plugin-babel@5.0.4
npm ERR!   node_modules/@vue/cli-plugin-babel
npm ERR!     dev @vue/cli-plugin-babel@"~5.0.0" from the root project
npm ERR!   17 more (@vue/cli-plugin-eslint, @vue/cli-service, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! less-loader@"5.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from less-loader@5.0.0
npm ERR!   node_modules/less-loader
npm ERR!     less-loader@"5.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\admin\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Local\npm-cache\_logs\2022-05-07T09_45_32_750Z-debug-0.log

经过以上配置之后，你会发现打包之后的dist/js文件夹里面出现了一些.gz格式的文件，这个就是拆解压缩之后文件包，他们文件都比较小，之后我们还需要nginx的配置文件进行配置，配置代码如下

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    gzip  on;
    # 设置缓冲区大小
    gzip_buffers 4 16k;
     
    #压缩级别官网建议是6
    gzip_comp_level 6;
    #压缩的类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }