Vue cli项目开启Gzip
安装 compression-webpack-plugin
建议安装v1.1.11版本,最新版本可能会报错
cnpm i compression-webpack-plugin@1.1.11 -D
更改配置文件
开启生产环境gzip功能。
/config/index.js:
productionGzip: true,
/build/webpack.prod.config.js:
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // asset 改为 filename
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
最后重新构建项目
npm run build
可以看到构建后的项目 /static
中的静态资源目录中多了后缀 .gz
的压缩文件。
服务器开启gzip功能
我们服务器使用Express,安装插件 compression
cnpm i compression -S
添加中间件
app.js:
const compression = require('compression');
app.use(compression())
最后重启服务器,浏览页面可以看到加载的资源文件大小比之前明显减小了。
Vue cli项目开启Gzip的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
随机推荐
- uva 11404 dp
UVA 11404 - Palindromic Subsequence 求给定字符串的最长回文子序列,长度一样的输出字典序最小的. 对于 [l, r] 区间的最长回文串.他可能是[l+1, r] 和[ ...
- 【C/C++】高亮C++中函数的重写——函数名相同?参数列表相同?返回值相同?
C++的重载给人留下了非常深刻的影响,原因是重载的条件很值得注意:函数名相同,参数列表不相同的两个函数构成重载函数,而无关乎二者的返回值. 但是C++中的函数重写又是另一码事.标准规定:只要函数名相同 ...
- 巧用Excel提高工作效率
程序员如何巧用Excel提高工作效率 主要讲解下Excel中VLOOKUP函数的使用,相比于上一篇中的内容,个人觉得这个相对高级一些. 1.使用背景 为什么会使用到这个函数呢,背景是这样的,有两个系统 ...
- webpack 样式分离之The root route must render a single element
公司项目使用的是webpack1,使用extract-text-webpack-plugin 插件无法将css分离出来,检查原因,发现有如下代码 <Route path="/home& ...
- 机器学习三 -- 用Python实现K-近邻算法
Python语言实现机器学习的K-近邻算法 写在前面 额...最近开始学习机器学习嘛,网上找到一本关于机器学习的书籍,名字叫做<机器学习实战>.很巧的是,这本书里的算法是用Python语言 ...
- EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位
EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...
- 九度OJ 1077:最大序列和 (DP)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5600 解决:1637 题目描述: 给出一个整数序列S,其中有N个数,定义其中一个非空连续子序列T中所有数的和为T的"序列和&qu ...
- Thinkphp2.2 config.inc.php常用配置
CHECK_FILE_CASE -- windows环境下面的严格检查大小写. /* 项目设定 */ 'APP_DEBUG' => false, // 是否开启调试模式 'AP ...
- sql性能分析语句
SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical_reads N'物理读取总次数' ,tota ...
- Java for LeetCode 083 Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...