首先添加yarn add 插件 “compression-webpack-plugin”

然后在vue.config.js里引入

在configureWebpack里增加插件代码。

注意：deleteOriginalAssets: true。网上很多博客都是false，然后打包体积比原来还多。尴尬！

结果，打包体积从5.85m。减到2.71m。给力！！！

vue-cli3开启gzip压缩的更多相关文章

  1. Vue CLI3 开启gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...

  2. Nginx 开启gzip 压缩

    随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术. 经过gz ...

  3. 【转载】HttpWebRequest开启gzip压缩简介

    在用HttpWebRequest对象时,一般我们都没有开启gzip压缩,如果服务端返回的数据比较大,这是我们需要开启gzip压缩,怎么开启呢? 1.给HttpWebRequest对象,添加如下Head ...

  4. IIS7.5开启GZip压缩

    在IIS7.5选择要开启GZip压缩的网站,在功能视图中找到并双击"压缩"图标,在压缩界面中钩选"启用静态内容压缩"和"启用动态内容压缩", ...

  5. 修改Apache配置文件开启gzip压缩传输

    转自:http://down.chinaz.com/server/201202/1645_1.htm 最近无事研究一些Web的优化,用工具page speed检测网站时发现还没有开启gzip压缩,于是 ...

  6. IIS6.0开启gzip压缩(来自百度)

    IIS6.0开启gzip压缩 | 更新:2012-08-10 10:29 1 2 3 4 5 分步阅读 开启gzip可以极大的加速网站.有时压缩比率高达80%,近来测试了一下,最少都有40%以上,还是 ...

  7. Nginx开启gzip压缩功能

    在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...

  8. WIN2003服务器IIS下如何开启GZIP压缩

    在上一篇文章黑客流谈到了关于网页打开速度对SEO的影响,其中提到了网页开启Gzip压缩的好处,接下来我来和大家分享一下WINDOWS系统IIS服务器下如何开启Gzip压缩. 首先我们来了解一下什么是G ...

  9. apache 配置静态文件缓存和开启gzip压缩

    1,设置文件静态缓存3天: 在httpd.conf 里添加如下代码: #文件静态缓存配置 <IfModule expires_module> #打开缓存 ExpiresActive on ...

  10. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

随机推荐

  1. 渐进式web全栈：blazor web app

    前言 本文要说的这种开发模式,这种模式并不是只有blazor支持,js中有一样的方案next.js nuxt.js:blazor还有很多其它内容,本文近关注渐进式开发模式. 是的,前后端是主流,不过以 ...

  2. chatgpt接口开发笔记3: 语音识别接口

    chatgpt接口开发笔记3: 语音识别接口 1.文本转语音 1.了解接口参数 接口地址: POST https://api.openai.com/v1/audio/speech 下面是接口文档描述内 ...

  3. [Ynoi2002] Goedel Machine

    题目描述 由于你不会设计哥德尔机,所以你决定先做一道数据结构题: 给定一个长度为 \(n\) 的序列 \(a_1\cdots a_n\).你需要回答 \(m\) 个询问,第 \(i\) 个询问给定一个 ...

  4. [ABC263B] Ancestor

    Problem Statement There are $N$ people, called Person $1$, Person $2$, $\ldots$, Person $N$. The par ...

  5. MySQL运维7-Mycat水平分表

    一.水平分表场景 在业务系统中,有一张日志表,业务系统每天都会产生大量的日志数据,单台服务器的数据存储即处理能力是有限的,可以对数据库表进行拆分,这时候就可以使用水平分表的策略 说明1:水平分表,每个 ...

  6. Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装

    项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求,支持多域名请求地址 安装 npm i axios 封装 utils 目录下新建 request 文件夹,并新建 i ...

  7. 2023年度低代码平台企业TOP50榜单公布—以开源起家的JeecgBoot格外亮眼

    近日,中国科学院主管.科学出版社主办的国家级核心期刊<互联网周刊>联合eNet研究院.德本咨询评选的<2023低代码企业50强>榜单正式公布.这一榜单的公布引起了业内外的广泛关 ...

  8. 免费背景音人声分离解决方案MVSEP-MDX23,足以和Spleeter分庭抗礼

    在音视频领域,把已经发布的混音歌曲或者音频文件逆向分离一直是世界性的课题.音波混合的物理特性导致在没有原始工程文件的情况下,将其还原和分离是一件很有难度的事情. 言及背景音人声分离技术,就不能不提Sp ...

  9. ElasticSearch之系统关键配置

    ElasticSearch之系统关键配置 集群名称 在配置文件$ES_HOME/config/elasticsearch.yml中指定,样例如下: cluster: name: logging-pro ...

  10. 一键式调试工具—Reqable 使用指南

    简介 Reqable是一款跨平台的专业HTTP开发和调试工具,在全平台支持HTTP1.HTTP2和HTTP3(QUIC)协议,简单易用.功能强大.性能高效,助力程序开发和测试人员提高生产力!本产品需要 ...