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 ...
随机推荐
- 一文了解@Conditional注解说明和使用
@Conditional:Spring4.0 介绍了一个新的注解@Conditional,它的逻辑语义可以作为"If-then-else-"来对bean的注册起作用. @Con ...
- [jjzhu学java]之solr4.9同步mysql数据
Solr是一个高性能,採用Java5开发,基于Lucene的全文搜索server.同一时候对其进行了扩展,提供了比Lucene更为丰富的查询语言,同一时候实现了可配置.可扩展并对查询性能进行了优化,而 ...
- smokeping插件使用及说明
smokeping七大组件:general(普通设置) .alerts(警报设置).Datebase(数据库参数).presentation(网络自定义).slaves(从smokeping定义).t ...
- JQuery的一些思想,自己的一些见解!!!!
自己总结了一下JQuery底层的一些思想,纯属于个人见解.. 为了方便描述,现在客户假如给了我们一个需求: 页面上有两个按钮,一张图片,当我点击hidden按钮时隐藏图片,当我点击show按钮时显示图 ...
- 【caffe】Caffe的Python接口-官方教程-00-classification-详细说明(含代码)
00-classification 主要讲的是如何利用caffenet(与Alex-net稍稍不同的模型)对一张图片进行分类(基于imagenet的1000个类别) 先说说教程到底在哪(反正我是找了半 ...
- SERVICE_STATUS结构各成员解析
在编写Windows服务的时候,需要调用API函数::SetServiceStatus()向服务控制管理器(SCM)提交更新当前服务的状态信息,其第2个参数为指向SERVICE_STATUS结构的指针 ...
- iOS --生产JSON格式,创建JSON文件,创建文件夹,指定储存
//生成json文件 - (void)onjson { // 如果数组或者字典中存储了 NSString, NSNumber, NSArray, NSDictionary, or NSNull ...
- “volatile”这个关键字
我们经常使用“volatile”这个关键字,它是什么意思? 解析:volatile问题.当一个对象的值可能会在编译器的控制或监测之外被改变时,例如一个被系统时钟更新的变量,那么该对象应该声明成vola ...
- python 基础 7.7 json--上
一. 文件json ...
- 九度OJ 1068:球的半径和体积 (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5385 解决:1949 题目描述: 输入球的中心点和球上某一点的坐标,计算球的半径和体积 输入: 球的中心点和球上某一点的坐标,以如下形式输 ...