Vue项目初次访问慢的一种解决思路

行百里er

发布于 2022-03-30 10:05:11

1.8K0

发布于 2022-03-30 10:05:11

文章被收录于专栏：JavaJourney

最近忙了一个项目，前后端分离的，前端vue+elementui，苦于找不到给力的前端人员，自己花了点功夫小小研究了一下。在这个过程中，vue打包部署后，第一次访问项目时总感觉异常的慢，几经摸索，找到一个解决思路，我认为还是值得记录一下的。

1Vue打包部署后访问慢的现象

先来看一下，vue.config.js的配置

publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
  port: port,
  open: true,
  https: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    '/': {
      target: 'https:/xxxxx/api/',
      changeOrigin: true,
      ws: false
    }
  }

package.json中打包脚本部分：

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:pre": "vue-cli-service build --mode pre-production",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

执行如下命令打包：

npm run build:pre

将打包后的dist文件夹上传到服务器上部署（nginx、tomcat都可以，我的环境是nginx），访问：

如图所示发现app.js这个文件有4M多，花了30多秒的时间！

而且这个app.js加载完了之后还是很慢，于是怀疑还有其他文件加载缓慢，筛选js：

问题找到了，就是这两个大的js文件导致的！

2解决方案

既然是打包后的文件过大，那就考虑打包时压缩一下文件。

一番搜索，发现还真可以。下面看方法。

压缩组件

在package.json中添加组件依赖：

"compression-webpack-plugin": "^1.1.11",

install：

npm install

vue.config.js关键配置

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {
    config.name = name
    config.resolve.alias['@'] = resolve('src')
    config.performance = {
      hints: 'warning',
      //入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      //生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
    if (process.env.NODE_ENV !== 'development') {
      // 生产环境
      // 编译时删除console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      //  配置productionGzip-高级的方式
      // 配置参数详解
      // asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
      // algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
      // test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
      // threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
      // minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    } else {
      // 开发环境
    }
  },

再次打包会发现app.js的体积小了很多。

nginx配置

在http下加入如下配置：

gzip on; # 开启Gzip
gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-03-10，如有侵权请联系 cloudcommunity@tencent.com 删除

打包