首页 > 其他分享 >vue 处理打包后加载慢的问题

vue 处理打包后加载慢的问题

时间:2022-10-21 11:55:22浏览次数:62  
标签:vue compression text 压缩 js css gzip 打包 加载

在开发项目时引入过多的插件时,容易导致项目打包后chunk-vendors.js文件过大,导致浏览器加载慢的问题,目前有两种解决方式

方式一:

由于:chunk-vendors文件过大、js没有压缩、服务器没有开启gzip
解决方式:
1、首先在build发布时候压缩js、css等资源文件
2、安装npm压缩组件

npm install --save-dev compression-webpack-plugin    //vue3 
npm i [email protected]    //vue 4

3、配置
压缩js、css文件,在vue.config.js 中加入如下配置项:

const CompressionPlugin = require("compression-webpack-plugin")
 
module.exports = {
  chainWebpack: (config) => {
    // 生产环境,开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.(js|css|less|map)$/, // 匹配文件名
        threshold: 1024, // 对超过10k的数据压缩
        minRatio: 0.8,
      }))
    }
 
  },
}

后端需要的配置:
在Nginx服务端开启gzip

server{
        gzip on;
        gzip_static on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
}

tomcat开启nginx(现在基本上tomcat都处于内嵌状态)

<Connector port="8080"  protocol="org.apache.coyote.http11.Http11NioProtocol"
    useSendfile="false"  
    connectionTimeout="20000"
    redirectPort="8443"
    compression="on"
    compressionMinSize="50"
    noCompressionUserAgents="gozilla,traviata"
    compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>
### 方式二(仅后端):
接口请求的数据太大。
控制返回参数收效甚微,这时开启 gzip 就非常有用了,可以压缩接口请求的数据,一般的json文本压缩比率很大,开启之后接口时间大幅下降!
1、启用步骤
Spring Boot 项目配置:

server.compression.enabled=true

默认只压缩超过 2048 字节的数据,修改server.compression.min-response-size的值可以设置该大小
默认情况下,只有在响应内容类型为以下内容时才会压缩响应:

text/html
text/xml
text/plain
text/css

我们的接口返回的是 json 数据,所以修改下面的配置:

server.compression.mime-types=application/json

yml 文件的配置方式

开启Gzip压缩,默认只压缩超过2048字节的数据

server:
compression:
enabled: true
mime-types: application/json

这样 Gzip 就开启了!

标签:vue,compression,text,压缩,js,css,gzip,打包,加载
From: https://www.cnblogs.com/axingya/p/16812992.html

相关文章

  • Winform打包生成exe
    1、首选下载安装MicrosoftVisualStudioInstallerProjects扩展插件 2、新建项目选择模板setup   3、第三步:项目创建成功之后,添加文件1.右击ApplicationFold......
  • vue项目封装api接口
    前言:vue的axios基于promise的http库,可以运行在浏览器和node环境中一:api封装文件request..jsimport'axios'from'axios'//引用axios插件 npminstallaxios--s//创......
  • Webpack完整打包流程分析
    前言webpack在前端工程领域起到了中流砥柱的作用,理解它的内部实现机制会对你的工程建设提供很大的帮助(不论是定制功能还是优化打包)。下面我们基于webpack5源码结构,对......
  • Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到
    一般后台对商品的信息管理、包含商品的上架与下架。为了提高用户的体验、将商品上下架的操作做成开关的形式。同时后台数据库中保存的商品状态能够根据开关状态改变。1......
  • Vue虚拟dom是如何被创建的
    先来看生成虚拟dom的入口文件:...import{parse}from'./parser/index'import{optimize}from'./optimizer'import{generate}from'./codegen/inde......
  • 权昌TSC244条码打印机如何加载数据实现大批量打印呢?
    我公司的TSCTTP-244条码打印机,只会改个名称打一张,怎么样改数据或者是加载数据实现大量打印的呢? 解答: TSCTTP-244条码打印机,是一款性能不错的桌面型条码打印机,最大......
  • Fabric8 Docker Maven Plugin 如何让部署的时候执行 Docker 打包推送
    配置方案在下面的这几句话。<executions><execution><id>default</id><phase......
  • Vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://gi......
  • 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践
    最近一种在捣鼓Tauri集成Vue3技术开发桌面端应用实践,tauri实现创建多窗口,窗口之间通讯功能。开始正文之前,先来了解下tauri结合vue3.js快速创建项目。tauri在......
  • vue3使用echarts插件并实现点击下载图表功能
    接到一个新的需求,就是用vue3制作一幅世界地图,并实现点击下载按钮将图表转变为图片下载到本地。使用插件: html2canvasnpm安装: npminstallhtml2canvas组件引入: import......