vue-cli 3.0 开启 Gzip 方法
vue.config.js
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
)
}
}
}
注意这里使用的是 compression-webpack-plugin 2.0.0,如果使用1.x 可能需要指定 assets 选项,2.0 改选项改为了 filename,并且可以省略
本地构建会直接生成 gzip 文件
nginx 端需要开启静态Gzip,参见:https://www.cnblogs.com/savokiss/p/8419343.html
vue-cli 3.0 开启 Gzip 方法的更多相关文章
- IIS6.0开启gzip压缩(来自百度)
IIS6.0开启gzip压缩 | 更新:2012-08-10 10:29 1 2 3 4 5 分步阅读 开启gzip可以极大的加速网站.有时压缩比率高达80%,近来测试了一下,最少都有40%以上,还是 ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
随机推荐
- Daily Scrumming* 2015.12.16(Day 8)
一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1036 https://github.com/buaaclubs-team/temp-front/com ...
- Beta冲刺——day2
Beta冲刺--day2 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...
- this 指向问题
你不懂JS: this 与对象原型 第二章: this豁然开朗! 在第一章中,我们摒弃了种种对this的误解,并且学习了this是一个完全根据调用点(函数是如何被调用的)而为每次函数调用建立的绑定. ...
- golang 实现线程池
package main import ( "fmt" "time" ) type Pool struct { Queue chan func() error; ...
- java自定义注解学习(二)_注解详解
上篇文章,我们简单的实现了一个自定义注解,相信大家对自定义注解有了个简单的认识,这篇,这样介绍下注解中的元注解和内置注解 整体图示 内置注解 @Override 重写覆盖 这个注解大家应该经常用到,主 ...
- 从0到1搭建基于Kafka、Flume和Hive的海量数据分析系统(一)数据收集应用
大数据时代,一大技术特征是对海量数据采集.存储和分析的多组件解决方案.而其中对来自于传感器.APP的SDK和各类互联网应用的原生日志数据的采集存储则是基本中的基本.本系列文章将从0到1,概述一下搭建基 ...
- jQuery最新CDN调用地址 更新(201902)
收集最新的jQuery地址,直接调用. 关于如何选择什么版本: https://www.cnblogs.com/osfipin/p/6211468.html 下面是收集的最新版本: 官方//code. ...
- 【BZOJ3670】【NOI2014】动物园(KMP算法)
[BZOJ3670]动物园(KMP算法) 题面 BZOJ 题解 神TM阅读理解题 看完题目之后 想暴力: 搞个倍增数组来跳\(next\) 每次暴跳\(next\) 复杂度\(O(Tnlogn)\) ...
- 前端学习 -- Css -- 否定伪类
语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素. <!DOCTYPE html> <html> <head> <meta charset ...
- Python之旅:MySQL系列
第一篇:初识数据库 第二篇:库操作 第三篇:表操作 第四篇:数据操作 第五篇:索引原理与慢查询优化 第六篇:数据备份.pymysql模块 第七篇:视图.触发器.事务.存储过程.函数 第八篇:ORM框架 ...