首先添加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. NoSQL数据库与关系数据库的比较

    1.在原理方面 2.在数据规模方面 3.在数据库模式方面 4.查询效率方面: 5.在事务一致性方面: 6.在数据完整性方面: 7.在可扩展性方面: 8.在可用性方面 9.在标准化方面: 10.在技术支 ...

  2. k8s安装网络插件calico出现error validating "calico.yaml": error validating data: invalid object to validate; if you choose to ignore these errors, turn validation off with --validate=false

    解决办法:使用下面版本的calico curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O

  3. EF Core助力信创国产数据库

    前言 国产数据库作为国产化替代的重要环节,在我国信创产业政策的指引下实现加速发展,我们国产数据库已进入百花齐放的快速发展期,相信接触到涉及到政府类等项目的童鞋尤为了解,与此同时我们有一部分也在使用各种 ...

  4. python 实现一个简单的计算器

    python 实现一个简单的计算器 本文主要整合下tkinter ,实现下简单的计算器. 代码如下: #!/usr/bin/python3 # -*- coding: UTF-8 -*- " ...

  5. ElasticSearch之cat fielddata API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/fielddata?v=true&pretty" --cacert $ES ...

  6. 由浅入深理解C#中的事件

    目录 本文较长,给大家提供了目录,可以直接看自己感兴趣的部分. 前言 有关事件的概念 示例 ​ 简单示例 ​ 标准 .NET 事件模式 ​ 使用泛型版本的标准 .NET 事件模式 ​ 补充 总结 参考 ...

  7. Go 自动补全gocode

    go语言自动补全代码,需要添加gocode的程序. 执行: go get github.com/nsf/gocode 一般来说,gocode的源码会在$GOPATH/src/github.com/ns ...

  8. 【开源项目】轻量元数据管理解决方案——Marquez

    大家好,我是独孤风. 又到了本周的开源项目推荐.最近推荐的元数据管理项目很多,但是很多元数据管理平台的功能复杂难用. 那么有没有轻量一点的元数据管理项目呢? 今天为大家推荐的开源项目,就是一个轻量级的 ...

  9. 文心一言 VS 讯飞星火 VS chatgpt （34）-- 算法导论5.3 1题

    一.Marceau 教授不同意引理 5.5 证明中使用的循环不变式.他对第1次送代之前循环不变式是否为真提出质疑.他的理由是,我们可以很容易宣称一个空数组不包含0排列.因此一个空的子数组包含一个0排列 ...

  10. 解读clickhouse存算分离在华为云实践

    摘要:本文是我们对clickhouse做了最简单的支持obs的适配改造. 本文分享自华为云社区<clickhouse存算分离在华为云实践>,作者: he lifu. clickhouse是 ...