安装 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的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  3. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  4. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  5. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  6. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  9. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

随机推荐

  1. 一文了解@Conditional注解说明和使用

    ​ @Conditional:Spring4.0 介绍了一个新的注解@Conditional,它的逻辑语义可以作为"If-then-else-"来对bean的注册起作用. @Con ...

  2. [jjzhu学java]之solr4.9同步mysql数据

    Solr是一个高性能,採用Java5开发,基于Lucene的全文搜索server.同一时候对其进行了扩展,提供了比Lucene更为丰富的查询语言,同一时候实现了可配置.可扩展并对查询性能进行了优化,而 ...

  3. smokeping插件使用及说明

    smokeping七大组件:general(普通设置) .alerts(警报设置).Datebase(数据库参数).presentation(网络自定义).slaves(从smokeping定义).t ...

  4. JQuery的一些思想,自己的一些见解!!!!

    自己总结了一下JQuery底层的一些思想,纯属于个人见解.. 为了方便描述,现在客户假如给了我们一个需求: 页面上有两个按钮,一张图片,当我点击hidden按钮时隐藏图片,当我点击show按钮时显示图 ...

  5. 【caffe】Caffe的Python接口-官方教程-00-classification-详细说明(含代码)

    00-classification 主要讲的是如何利用caffenet(与Alex-net稍稍不同的模型)对一张图片进行分类(基于imagenet的1000个类别) 先说说教程到底在哪(反正我是找了半 ...

  6. SERVICE_STATUS结构各成员解析

    在编写Windows服务的时候,需要调用API函数::SetServiceStatus()向服务控制管理器(SCM)提交更新当前服务的状态信息,其第2个参数为指向SERVICE_STATUS结构的指针 ...

  7. iOS --生产JSON格式,创建JSON文件,创建文件夹,指定储存

    //生成json文件 - (void)onjson { //    如果数组或者字典中存储了  NSString, NSNumber, NSArray, NSDictionary, or NSNull ...

  8. “volatile”这个关键字

    我们经常使用“volatile”这个关键字,它是什么意思? 解析:volatile问题.当一个对象的值可能会在编译器的控制或监测之外被改变时,例如一个被系统时钟更新的变量,那么该对象应该声明成vola ...

  9. python 基础 7.7 json--上

                                                                                              一. 文件json ...

  10. 九度OJ 1068:球的半径和体积 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5385 解决:1949 题目描述: 输入球的中心点和球上某一点的坐标,计算球的半径和体积 输入: 球的中心点和球上某一点的坐标,以如下形式输 ...