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

>>强大,10k+点赞的 SpringBoot 后台管理系统竟然出了详细教程!

最近忙了一个项目,前后端分离的,前端vue+elementui,苦于找不到给力的前端人员,自己花了点功夫小小研究了一下。

在这个过程中,vue打包部署后,第一次访问项目时总感觉异常的慢,几经摸索,找到一个解决思路,我认为还是值得记录一下的。

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

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

publicPath: './',
outputDir'dist',
assetsDir'static',
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
  port: port,
  opentrue,
  httpstrue,
  overlay: {
    warningsfalse,
    errorstrue
  },
  proxy: {
    '/': {
      target'https:/xxxxx/api/',
      changeOrigintrue,
      wsfalse
    }
  }

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),访问:

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

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

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

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

问题找到了,就是这两个大的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']

configureWebpackconfig => {
    config.name = name
    config.resolve.alias['@'] = resolve('src')
    config.performance = {
      hints'warning',
      //入口起点的最大体积 整数类型(以字节为单位)
      maxEntrypointSize50000000,
      //生成文件的最大体积 整数类型(以字节为单位 300k)
      maxAssetSize30000000,
      //只给出 js 文件的性能提示
      assetFilterfunction(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',
          testnew RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold10240,
          minRatio0.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].";


原文始发于微信公众号(行百里er):Vue项目初次访问慢的一种解决思路