专栏首页JavaJourneyVue项目初次访问慢的一种解决思路

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

最近忙了一个项目,前后端分离的,前端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]\.";
文章分享自微信公众号:
行百里er

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:行百里er
原始发表时间:2022-03-10
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • vue - 小日历项目制作中的问题与解决思路

    项目难点: 1. 每个月的日期数是不定的,拢共需要几个格子? 按照教程的做法需要42个。所以遍历数字42,得到42个div做格子。

    xing.org1^
  • 动态构建的多页面vue-cli模版

    vue官方提供了几个vue cli的模版,但都单页面模版,然而在真实的业务场景下还是有多页面模版的需求,百度和google上都能搜索到不少单页面模版改多页面模版...

    easonxie
  • 如何使用prerender-spa-plugin插件对页面进行预渲染

    文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。

    黄Java
  • Vue 的打包优化之路Vue的打包优化之路

    ECharts的JSON地图文件占了很大一部分,大概有1.96MB gzip以后900KB,这一部分是没有办法做处理的。然后ECharts也应该使用按需加载

    MrTreasure
  • super 码农 copy 2

    最近有不少同学不会写某个功能,在社区里发帖要代码的,还请大家先思考一下,发帖子的时候请带上自己的思路,而不是直接要代码,多思考对自己有帮助。

    PHP开发工程师
  • Vue2 源码解析

    Vue.js 是一个渐进式 MVVM 框架,目前被广泛使用,也成为目前前端技术中颇具代表性的一个框架。

    EchoROne
  • Electron 常见问题收录

    由于 Windows 和 Mac 原生的应用程序开发难度比较大,所以使用 Electron 版 TRTC 的能力就成了一个不错的选择。不过由于国内网络环境比较复...

    用户3045385
  • 快速创建vite+vue3+ts项目及首次缓慢问题

    vite推出之后,在国内火的一塌糊涂,在前端圈立马就卷了起来。我这撸着JQ项目的还没开始用过。公司用vite+vue3+ts的项目拿来跑了一下,第一次启动慢的我...

    wade
  • 前端面试题 vue_vue面试题必问

    9.VUE 中如何封装组件?什么组件,为什么要封装组件?组件中 data 为什么是一个函数?

    全栈程序员站长
  • 微信钱包中58到家首页为什么这么快

    原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->...

    架构师之路
  • 前后端分离和模块化-58到家微信首页重构之路

    微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

    寒月十八
  • 初次在Vue项目使用TypeScript,需要做什么

    总所周知,Vue新版本3.0 使用 TypeScript 开发,让本来就很火的 TypeScript 受到更多人的关注。虽然 TypeScript 在近几年才火...

    WahFung
  • 基于微前端qiankun的多页签缓存方案实践

    本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开发的同学,提供...

    2020labs小助手
  • 【前端词典】单页应用 VS 多页应用

    最近看到一些人在问单页面和多页面应用的区别。因为最近在整理 Vue 相关的内容,所以也就输出这一篇短文希望可以给你一个整体的认识。

    小生方勤
  • TRTC Electron SDK 常见问题收录

    由于 Windows 和 Mac 原生的应用程序开发难度比较大,所以使用 Electron 版 TRTC 的能力就成了一个不错的选择。不过由于国内网络环境比较复...

    用户5840286

扫码关注腾讯云开发者

领取腾讯云代金券