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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP引用返回用法示例
2016/05/28 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
Python KMeans聚类问题分析
2018/02/23 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
django修改models重建数据库的操作
2020/03/31 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python中format函数如何使用
2020/06/22 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
C语言编程练习
2012/04/02 面试题
常务副总经理任命书
2014/06/05 职场文书
市场营销工作计划书
2014/09/15 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers