安装 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. uva 11404 dp

    UVA 11404 - Palindromic Subsequence 求给定字符串的最长回文子序列,长度一样的输出字典序最小的. 对于 [l, r] 区间的最长回文串.他可能是[l+1, r] 和[ ...

  2. 【C/C++】高亮C++中函数的重写——函数名相同?参数列表相同?返回值相同?

    C++的重载给人留下了非常深刻的影响,原因是重载的条件很值得注意:函数名相同,参数列表不相同的两个函数构成重载函数,而无关乎二者的返回值. 但是C++中的函数重写又是另一码事.标准规定:只要函数名相同 ...

  3. 巧用Excel提高工作效率

    程序员如何巧用Excel提高工作效率 主要讲解下Excel中VLOOKUP函数的使用,相比于上一篇中的内容,个人觉得这个相对高级一些. 1.使用背景 为什么会使用到这个函数呢,背景是这样的,有两个系统 ...

  4. webpack 样式分离之The root route must render a single element

    公司项目使用的是webpack1,使用extract-text-webpack-plugin 插件无法将css分离出来,检查原因,发现有如下代码 <Route path="/home& ...

  5. 机器学习三 -- 用Python实现K-近邻算法

    Python语言实现机器学习的K-近邻算法 写在前面 额...最近开始学习机器学习嘛,网上找到一本关于机器学习的书籍,名字叫做<机器学习实战>.很巧的是,这本书里的算法是用Python语言 ...

  6. EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位

    EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...

  7. 九度OJ 1077:最大序列和 (DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5600 解决:1637 题目描述: 给出一个整数序列S,其中有N个数,定义其中一个非空连续子序列T中所有数的和为T的"序列和&qu ...

  8. Thinkphp2.2 config.inc.php常用配置

    CHECK_FILE_CASE -- windows环境下面的严格检查大小写. /* 项目设定 */    'APP_DEBUG'    => false, // 是否开启调试模式    'AP ...

  9. sql性能分析语句

    SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical_reads N'物理读取总次数' ,tota ...

  10. 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 ...