首先添加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. JSON多层嵌套复杂结构数据扁平化处理转为行列数据

    背景 公司的中台产品,需要对外部API接口返回的JSON数据进行采集入湖,有时候外部API接口返回的JSON数据层级嵌套比较深,举个栗子: 上述的JSON数据中,最外层为请求返回对象,data里面包含 ...

  2. [GDOIpj221D] 小学生计数题

    第四题 小学生计数题 提交文件: counting.cpp 输入文件: counting.in 输出文件: counting.out 时间空间限制: 1 秒, 256 MB 作为 GDOI 的组题人, ...

  3. free内存参数介绍

    第一部分Mem行: total 内存总数: 15.7G used 已经使用的内存数: 15.6G free 空闲的内存数: 93M shared 当前已经废弃不用,总是0 buffers Buffer ...

  4. 华企盾DSC客户端连不上服务器（客户端在回收站）

    解决方法:确保该计算机在CLIENT表recyclebin列中的值为False,最好把所有计算机都改成False,改好后重启DSC服务器,最后重新安装客户端. 或者将客户端从回收站移动到正常的工作组.

  5. 【Python】【OpenCV】定位条形码（二）moments和HuMoments

    根据上一篇博客可知,单纯的通过求取最大面积而进行定位的局限性,因此我们接下来将通过cv2.moments()和cv2.HuMoments()这两个方法来在更复杂的环境中去找到我们的目标区域. cv2. ...

  6. C++ Qt开发：SqlRelationalTable关联表组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍SqlRela ...

  7. 从零玩转Docker之docker-compose快捷部署中间件-dockercompose2

    title: 从零玩转Docker之docker-compose快捷部署中间件 date: 2023-04-04 17:35:18.035 updated: 2023-05-13 23:08:09.5 ...

  8. 通过鼠标拖拉获取图片原像素的两个点坐标vue

    <template> <div> <img class="no-drag" ref="image" src="https ...

  9. 干货分享丨玩转物联网IoTDA服务系列六-恒温空调

    摘要:本文主要讲述空调接入到物联网平台后,通过恒温空调控制系统,不论空调是否开机,都可以调整空调默认温度,待空调上电开机后,自动按默认温度调节. 场景简介 通过恒温控制系统,不论空调是否开机,都可以调 ...

  10. 用了这个评估优化LiteOS镜像利器，我有点飘...

    摘要:本文会给大家介绍下LiteOS Studio的镜像分析工具,这可是一个评估.优化镜像文件RAM.ROM占用大小的利器. 大家都知道嵌入式开发板由于受成本限制,芯片的RAM.Flash等硬件资源有 ...