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学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
js读取配置文件自写
Feb 11 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Javascript地址引用代码实例解析
Feb 25 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
一个目录遍历函数
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php文件包含的几种方式总结
2019/09/19 PHP
JS跨域总结
2012/08/30 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
Javascript中replace()小结
2015/09/30 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python sep参数使用方法详解
2020/02/12 Python
聊聊python中的循环遍历
2020/09/07 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
采购意向书范本
2014/03/31 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL