首先添加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. CH395+EMQX实现MQTT应用(Windows系统)

    目录: 1.MQTT协议 1.1简介 1.2特性 1.3实现方式 1.4数据包结构 2.EMQX具体操作步骤 3.代码说明 4.工程链接 MQTT协议 1.MQTT简介 MQTT是一种基于 发布/订阅 ...

  2. Nginx服务器常用参数设置

    Nginx作为一个高性能的Web服务器和反向代理,它的性能可以通过调整底层操作系统的参数来进一步优化.以下是一些常见的操作系统级别的调整,通常针对Linux系统: File Descriptors L ...

  3. 获取微信的token工具类

    import cn.hutool.extra.spring.SpringUtil; import cn.hutool.http.HttpUtil; import cn.RedisUtil; impor ...

  4. 真的最后一次了——城院GO导航大作业迭代最终版

    真的!!!最后一次了!不骗人! 1.小程序的体验版二维码: 想体验的可以申请一下体验权限: 2.小程序目前功能介绍 1.首先进入是index页面:点击第一个是学校简介页面,第二个能直接跳到主程序的地图 ...

  5. loader编写小记

    此项目在一些大佬的基础上进行了修改,或许能提供一些思路.还在学习中很菜很菜,不足之处还请师傅们多多指点 tips 对shellcode使用AES + Base85加密后以txt保存在远端供下载. 针对 ...

  6. 直击云栖|践行数据化运维，云掣重新解读MSP

    2020年云栖大会百城汇·杭州站,云掣MSP专场圆满落幕! 本次云栖大会·云掣MSP专场以"数据智能,智能运维"为主题,主要聚焦企业云化转型演进趋势,云上运维全景监控以及云原生云环 ...

  7. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 14. 使用GameplayTag实现防守反击技能

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章对应Lecture 17 - GameplayTags, 70节.本文将会结合前几节课使用的能力系统和G ...

  8. Java数组中常见的方法

    一.前言 代码: //给定一个数组 int[] arr = {234,312,32,1321,321,43}; int[] arr1 = new int[6]; int[] arr2 = {1,3,7 ...

  9. Sequelize的简单连接和使用

    Sequelize是一个基于Node.js的ORM框架 特点: 1.支持多种数据库:Sequelize支持多种关系型数据库,包括MySQL.PostgreSQL.SQLite和MSSQL等,适用于需要 ...

  10. Sermant：无代理服务网格架构解析及无门槛玩转插件开发

    本文分享自华为云社区<Sermant:无代理服务网格架构解析及无门槛玩转插件开发>,作者: 华为云社区精选 . 本期直播的主题是<从架构设计到开发实践,深入浅出了解Sermant&g ...