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) 在单个模版里面同时支持太多选项会导致模 ...
随机推荐
- LeetCode 70. Climbing Stairs爬楼梯 (C++)
题目: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either cl ...
- C++:多态浅析
1.多态 在C++中由两种多态性: • 编译时的多态性:通过函数的重载和运算符的重载来实现的 • 运行时的多态性:通过类继承关系和虚函数来实现的 特别注意: a.运行时的多态性是指程序执行前,无法根据 ...
- (Alpha)Let's-典型用户和场景&功能规格说明书
典型用户和场景 Personal/典型用户 名字 阿王 性别.年龄 男.20 职业 学生 收入 无 知识层次和能力 大学学生,善于乐于使用电脑.手机 生活/工作情况 上学 动机.目的.困难 感到大学生 ...
- PAT 甲级 1079 Total Sales of Supply Chain
https://pintia.cn/problem-sets/994805342720868352/problems/994805388447170560 A supply chain is a ne ...
- PAT 甲级 1087 All Roads Lead to Rome
https://pintia.cn/problem-sets/994805342720868352/problems/994805379664297984 Indeed there are many ...
- [CB] 支付宝区块链的应用- 区块链发票医保理赔.
全国第一单区块链理赔.发票开出:1分钟报销 区块链技术和概念随着比特币等虚拟电子货币的兴起而尽人皆知,但是区块链的用途可不仅仅只玩币,尤其是在“矿难”到来之后,区块链正在向更多应用领域渗透.最 ...
- SpringBoot 1.快速搭建一个 SpringBoot Maven工程
一.新建一个Maven工程 (1)选择创建简单MAVNE工程 (2)输入你自己的MAVEN工程的Group Id(必填).Artifact Id(必填).Version(必填).Packaging(必 ...
- Vue入门---属性、style和class绑定方法
一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- HGOI 20181028 题解
HGOI 20181028(复赛备考) /* 真是暴力的一天,最后一题MLE?由于数组开得太大了!!! 270滚粗 考场上好像智商高了很多?!(假的) */ sol:暴力求解,然后没有数据范围吐槽一下 ...
- 【CF437C】The Child and Toy
题目大意:给定一个有 N 个点,M 条边的无向图,点有点权,删除一个点就要付出所有与之有联系且没有被删除的点的点权之和的代价,求将所有点删除的最小代价是多少. 题解:从图连通性的角度出发,删除所有点就 ...