【VUE】vue配置Gzip压缩
【VUE】vue配置Gzip压缩
转载LuviaWu 发布于2019-07-17 09:28:57 阅读数 295 收藏
vue cli 2.9.6
安装compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
vue.config.js配置Gzip压缩
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
module.exports = {
// 配置反向代理
devServer: {
proxy: {
'/api': {
target: 'http://172.31.120.61:8088/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
}
}
配置Nginx
gzip on; #开启或关闭gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 8; #压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
vue项目开启Gzip压缩和性能优化 [亲测可用]
vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能
方法/步骤
第一步,在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin
第二步,运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression Plugin Invalid Options。根据官网提示,需要将CompressionWebpackPlugin的设置由asset改为filename。
第三步,再次运行 npm run build打包项目,这时可能会继续报错,提示TypeError: Cannot read property 'emit' of undefined。据我查证,是安装的compression-webpack-plugin依赖有问题,需要卸载compression-webpack-plugin更改安装低版本 v1.12。
第四步,卸载当前安装的compression-webpack-plugin:npm uninstall --save-dev compression-webpack-plugin
-
5
第五步,安装低版本compression-webpack-plugin:npm install --save-dev compression-webpack-plugin@1.1.2
-
6
第六步,再次运行 npm run build打包项目,这时将正常包vue项目,愉(ku)快(bi)的j将vue开发上线了。
-
7
第七步,开启 nginx 服务端 gzip性能优化。找到nginx配置文件在 http 配置里面添加如下代码,然后重启nginx服务即可。
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
-
8
总结一下,vue开启gzip性能优化主要分为两部分,成功开启后将大大优化vue首页加载时长。如果这篇文章帮到了你,辛苦大哥哥大姐姐们投票、点赞、打赏支持一下,谢谢!
相关文章
- Vue 过滤器
- vue - node_modules
- Vue - route 路由中配置 404 页面
- Vue项目修改浏览器滚动条样式
- Vue2.0 搭建Vue脚手架(vue-cli)
- Vue-cli / webpack 加载静态js文件的方法
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- (23)打鸡儿教你Vue.js
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
- IntellIJ IDEA 配置 Vue 支持
- vue多环境配置
- Vue---this.$route和this.$router这两个对象--都需要在router.js 中配置
- vue全家桶面试
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue项目启动时自动获取ip地址
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- 05-vue-cli-路由配置
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue 插槽
- Vue使用axios进行get请求拼接参数的几种方式