vue项目开启Gzip压缩和性能优化操作


Posted in Javascript onOctober 26, 2020

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.1.12。

第四步:卸载当前安装的compression-webpack-plugin:

npm uninstall --save-dev compression-webpack-plugin

第五步:安装低版本compression-webpack-plugin:

npm install --save-dev compression-webpack-plugin@1.1.2

第六步:再次运行 npm run build打包项目,这时将正常包vue项目,愉(ku)快(bi)的j将vue开发上线了。

第七步:开启 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;
}

注意:过程中可能出现的报错:

throw new ValidationError(ajv.errors, name);
 ^
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties
 at validateOptions (E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\node_modules\schema-utils\src\validateOptions.js:32:11)
building for production...E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\dist\index.js:175
 compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit);
 
TypeError: Cannot read property 'emit' of undefined
 at CompressionPlugin.apply (E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\dist\index.js:175:20)

补充知识:vue填坑之webpack run build 静态资源找不到

vue cli搭建的项目,在本地测试调试都OK,运行npm run dev之后运行正常,今天放到服务器上跑,结果RD说找不到打包后的静态资源,浏览器控制台错误代码404

问了RD,因为服务器上线方式的调整,不会指定具体项目路径因此,

https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css

这个文件找不到,看看我们正常打包好的目录:

vue项目开启Gzip压缩和性能优化操作

正确的访问路径是:

https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafdc6f047

config/index.js配置如图:

vue项目开启Gzip压缩和性能优化操作

思来想去之前打包好的文件直接扔到nginx就可以使用,实在不清楚原因。于是找到我们的美女组长姐姐来帮忙,分分钟改了config/index.js下的几行代码,如图:

vue项目开启Gzip压缩和性能优化操作

这里需要注意assetsPublicPath:'/deploy/' 末尾的斜杠一定要加,不然部分js打包后会出现

https://bigdata.yiche.com/deploystatic/css/app.149f36018149fcbe537f02cafdc6f047

这样的情况。

看下打包好的目录,对比之后会发现多了一层deploy目录,这个多出来的路径是index和assetsRoot这两个设置决定的

vue项目开启Gzip压缩和性能优化操作

而assetsPublicPath则是确定打包后的文件引用路径:看看打包后的index.html文件的js和css资源的引用路径:

vue项目开启Gzip压缩和性能优化操作

对比之前默认配置的路径:

vue项目开启Gzip压缩和性能优化操作

好了再放到服务器上,问题解决了。

问题总结:

原因是服务器没有指定项目目录,因此需要在打包时对打包文件添加访问的项目名称,所以在配置打包路径是要加上项目名称,下面是vue cli默认webpack config/index.js的配置解释

var path = require('path')
 
 module.exports = {
 build: { // production 环境
  env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
  index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
  assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
  assetsSubDirectory: 'static', // 编译输出的二级目录
  assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
  productionSourceMap: true, // 是否开启 cssSourceMap
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false, // 是否开启 gzip
  productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
 },
 dev: { // dev 环境
  env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
  port: 8080, // 运行测试页面的端口
  assetsSubDirectory: 'static', // 编译输出的二级目录
  assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
  proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false // 是否开启 cssSourceMap
 }
 }

本人个人理解,如有不对欢迎指出!

以上这篇vue项目开启Gzip压缩和性能优化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
Bootstrap响应式表格详解
May 23 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 #Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 #Javascript
vue下载二进制流图片操作
Oct 26 #Javascript
JavaScript如何操作css
Oct 24 #Javascript
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
You might like
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
js实现表格单列按字母排序
2020/08/12 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python中List的sort方法指南
2014/09/01 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
详解Python 循环嵌套
2020/07/09 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
公司经营目标责任书
2015/01/29 职场文书
开除员工通知
2015/04/22 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL