Vue cli项目开启Gzip

安装 compression-webpack-plugin
更改配置文件
服务器开启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 改为 filenamealgorithm: '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())

最后重启服务器，浏览页面可以看到加载的资源文件大小比之前明显减小了。

转载于:https://www.cnblogs.com/roddy/p/10839383.html

Vue cli项目开启Gzip相关推荐

Vue项目开启gzip
Vue项目开启gzip Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度 Gzip Precompression模块(Gzip Precompression) nginx缓存配置及开启 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
vue cli 项目在打包时候报错解决方法
问题描述报错一: 打包过程报错:Unexpected token name <i>, expected punc <;> IE浏览中报错:SCRIPT1003: 缺少':', ...
Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传竟然存的是 ...

Vue cli项目开启Gzip

安装 compression-webpack-plugin

更改配置文件

服务器开启gzip功能

Vue cli项目开启Gzip相关推荐

最新文章

热门文章