VUE之首次加载项目缓慢

最近公司有个大型的项目,使用vue2开发的,但是最终开发完成之后,项目发布到线上,首次加载项目特别缓慢,有时候至少三十秒才能加载完成,加载太慢了,太影响用户体验了,最近研究了一下优化方案

  方案一 使用Gzip

    下载插件:

压缩Webpack插件 (docschina.org)icon-default.png?t=N7T8https://v4.webpack.docschina.org/plugins/compression-webpack-plugin/

npm i compression-webpack-plugin -D

     vue.config.js配置:

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  transpileDependencies: ['resize-detector', 'crypto-js'],
  publicPath: process.env.VUE_APP_publicPath,
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: 'localhost',
    hot: true,
    port: 5566,
    open: true
  },
  chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|.\css/,
          threshold: 10240,
          exclude: /.map$/,
          deleteOriginalAssets: true
        })
      )
    }
    config.plugin('html').tap((args) => {
      args[0].title = process.env.VUE_APP_Title
      return args
    })
  }
}

   nginx.conf配置:

     我这里使用的是nginx,需要添加一下配置

  gzip on;
  gzip_static on;
  gzip_min_length 1k;
  gzip_buffers 4 32k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php  application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6].";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/489440.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java spirng和 mybatis 常用的注解有哪些

当在Java Spring和MyBatis中进行开发时,常用的注解对于简化配置和提高开发效率非常重要。以下是更多常用的注解以及它们的详细说明和用途: 在Spring中常用的注解: Component: 用途:表明一个类会作为组件被Spring容器管…

AJAX(一):初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

一、什么是AJAX 1.AJAX 就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。 2.XML 可扩展标记语言。XML被设计用来传输和…

C++(13) STL 库初识

文章目录 STL 库初识1. STL 库1.1 STL 库的案例1.2 C 标准模板库的三个组件1.3 案例展示 2. 迭代器1.1 概述和分类2.2 代码案例 STL 库初识 1. STL 库 1.1 STL 库的案例 类似学习了模板的概念。CSTL (标准模板库) 是一套功能强大的 C 模板类,提供了通用的模板类和…

【Linux详解】——进程信号

📖 前言:本期介绍进程信号。 目录 🕒 1. 生活角度的信号🕒 2. 技术角度的信号🕘 2.1 Linux中的信号🕘 2.2 进程对信号的处理 🕒 3. 信号的产生方式🕘 3.1 键盘产生🕘 3.2…

svn如何合并代码以及解决合并冲突的问题(把分支代码合并到主版本)

1.选择主版本的文件夹。 ​​​​​​​ 2.选择合并一个不同的分支 3.选择主分支的路径和要合并的代码范围 4.点解next 选择这两个选项 5.然后点击Test merge,查看能否和并成功 有红色的提示,说明是有冲突的, 都是黑色说明能够合并成功 …

【无标题】如何使用 MuLogin 设置代理

如何使用 MuLogin 设置代理 使用 MuLogin 浏览器设置我们的代理,轻松管理多个社交媒体或电子商务帐户。 什么是MuLogin? MuLogin 是一款虚拟反检测浏览器,使用户能够管理多个电子商务、社交媒体和广告帐户,而无需验证码或 IP 禁…

星巴克终止Odyssey Beta NFT计划

日前,咖啡品牌星巴克宣布将于3月31日终止其NFT产品Odyssey Beta客户忠诚度计划。这意味着,曾经旨在改进会员忠诚度的Web3 产品Starbucks Odyssey将终止,构筑多年的Web2会员系统“星享俱乐部”脱去了Web3外衣,回到了本来的面貌。 至…

体验分低导致闭店!抖音小店体验分是什么?教你如何提高体验分!

哈喽~我是电商月月 相信开抖音小店的伙伴们对体验分这个东西都不陌生,但如何有效的提高体验分你们知道吗? 今天,我就来讲讲抖音小店体验分低有什么后果,同时在后面说一下体验分降低如何提高! 大家可根据情况不同自行…

羊大师羊奶靠谱么?品质保障深度解析

羊大师羊奶靠谱么?品质保障深度解析 羊大师羊奶,作为市场上的知名品牌,其靠谱性一直备受消费者关注。那么,羊大师羊奶究竟靠谱不靠谱呢?这就需要从品质保障和消费者信赖两个方面进行深入解析。 从品质保障的角度来看&…

【JAVA】数据类型与变量(主要学习与c语言不同之处)

✅作者简介:大家好,我是橘橙黄又青,一个想要与大家共同进步的男人😉😉 🍎个人主页:橘橙黄又青-CSDN博客 目标: 1. 字面常量 2. 数据类型 3. 变量 1.字面常量 在上节课 Hello…

Mysql的高级语句2

目录 引言: 一、按关键字进行排序 1、语句以及用法 2、先创建一个新的数据库以及数据表,并且导入内容 二、关键字排序操作 1、单个字段排序 ①按照分数进行排序,默认不指定就是升序排列 ②按照分数降序排列 ③结合where进行条件过滤…

C# LINQ笔记

C# LINQ笔记 from子句 foreach语句命令式指定了按顺序一个个访问集合中的项。from子句只是声明式地规定集合中的每个项都要访问,并没有指定顺序。foreach在遇到代码时就执行其主体。from子句什么也不执行,只有在遇到访问查询变量的语句时才会执行。 u…

【zlm】问题记录:chrome更新引起的拉不出webrtc; 证书校验引起的放几秒中断

目录 chrome更新引起的拉不出webrtc 证书校验引起的放几秒中断 chrome更新引起的拉不出webrtc 【zlm】最新的chrome版本中的报错: 我有个问题event.js:8 [RTCPusherPlayer] DOMException: Failed to execute setRemoteDescription on RTCPeerConnection: Failed …

太牛逼了!视频号下载器手机版(工具+方法)绝了

在众多的视频号下载中,可以说这个工具真的是很牛逼了!这里问大家一个问题! 你使用视频号下载工具以及视频号下载器都会不会因时间导致而失效呢? 自从小编使用了这款工具后,就不会因为视频失效而烦恼。 很多人免费推荐…

互斥锁与信号量的区别

信号量与互斥锁都是用于多线程编程中,以实现资源共享和线程同步的机制,但它们在应用场景、实现方式和性能特点上有所不同。以下是详细介绍: 应用场景。信号量主要用于线程同步,其核心思想是控制对共享资源的访问许可,…

javaWeb项目-快捷酒店信息管理系统功能介绍

开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架:ssm、Springboot 前端:Vue、ElementUI 关键技术:springboot、SSM、vue、MYSQL、MAVEN 数据库工具:Navicat、SQLyog 项目关键技术 1、JSP技术 JSP(Java…

Windows虚拟主机上的网站如何来设置默认首页

近期有网友咨询想要知道Windows虚拟主机上的网站如何来设置默认首页,以便后期他需要时可以自行处理。这边了解到他当前使用的是Hostease 的Windows 虚拟主机,而设置默认首页的操作步骤如下: 1.Hostease的Windows虚拟主机都是带Plesk面板的,因此需要先进入…

智慧公厕的先进技术应用

公共厕所一直以来都是城市管理中一个重要的工作,但设施老化、环境脏乱、服务质量低下等问题一直困扰着城市居民。然而,随着科技的进步和数字技术的应用,智慧公厕的建设正在改变这一现状。 智慧公厕通过对所在辖区内所有公共厕所的全域感知、…

面试经典150题【91-100】

文章目录 面试经典150题【91-100】70.爬楼梯198.打家劫舍139.单词拆分322.零钱兑换300.递增最长子序列77.组合46.全排列39.组合总和(※)22.括号生成79.单词搜索 面试经典150题【91-100】 五道一维dp题五道回溯题。 70.爬楼梯 从递归到动态规划 public …

详解Java 中的 Lambda 表达式

引言: Lambda 表达式是 Java 8 中引入的一个重要特性,它可以使代码更加简洁、易读,并且更加具有函数式编程风格。Lambda 表达式本质上是一个匿名函数,它可以作为方法参数传递,也可以直接赋值给一个变量。 一、Lambda 表…