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

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

正确的访问路径是:

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

config/index.js配置如图:

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

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

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

这样的情况。

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

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

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

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

问题总结:

原因是服务器没有指定项目目录,因此需要在打包时对打包文件添加访问的项目名称,所以在配置打包路径是要加上项目名称,下面是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压缩和性能优化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue CLI4 Vue.config.js标准配置(最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression

  • Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • 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. 根据官网提示,需要将CompressionWebpac

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • 使用vue打包时gzip压缩的两种方案

    目录 介绍两种gzip压缩的方式 webpack打包生成gz文件 服务器在线gzip压缩 vue项目开启gzip压缩 前端配置 后端配置 开局一张图: 可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程. 介绍两种gzip压缩的方式 1.打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件: 2.浏览器请求xx.js文件时,服务器

  • Vite打包性能优化之开启Gzip压缩实践过程

    目录 前言 Gzip 开启 Gzip 插件的其他配置 总结 前言 在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等.除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等.本文会介绍在 vite 中使用插件来开启 Gzip 压缩. Gzip Gzip 是一种压缩算法,在网络传输中使用非常普遍.随便打开一个网页,都使用了 gzip 压缩: 需要注意的是,Gzip 压缩仅对于文本类型的资源有明显提示,压缩后的体积大约是压缩前的 1/

  • php使用curl获取header检测开启GZip压缩的方法

    本文实例讲述了php使用curl获取header检测开启GZip压缩的方法.分享给大家供大家参考,具体如下: 获得网页header信息,是网站开发人员和维护人员常用的技术.网页的header信息,非常丰富,非专业人士一般较难读懂和理解各个项目的含义. 获取网页header信息,方法多种多样,就php语言来说,我作为一个菜鸟,知道的方法也有4种那么多.下面逐一献上. 方法一:使用get_headers()函数 这个方法很多人使用,也很简单便捷,只需要两行代码即可搞定.如下: $thisurl =

  • Tomcat7中开启gzip压缩功能的配置方法

    使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度来看,还是有必要开启gzip压缩的. 对于tomcat7服务器,打开conf文件夹下的server.xml 文件,找到 复制代码 代码如下: <Connector port="8080" protocol="HTTP/1.1"                   

  • php简单开启gzip压缩方法(zlib.output_compression)

    一般而言,页面文件开启gzip压缩以后,其体积可以减小60%~90%,对于文字类站点,可以节省下大量的带宽与用户等待时间.但是不论是iis还是apache默认都只压缩html类静态文件,对于php文件需要模块配置才可支持(iis7.5中开启动态+静态压缩也可以),于是利用php自身功能到达gzip的效果也成为一项合理的诉求. 网上的教程基本是你抄我来我抄他,不外乎加头加尾或者自构函数两种写法.实际上每个php页面都要去加代码--当然也可以include引用,不过总显得略微麻烦. 实际上最简单的办

  • PHP中开启gzip压缩的2种方法

    网页开启gzip压缩以后,其体积可以减小20%~90%,可以节省下大量的带宽,从而减少页面响应时间,提高用户体验. php配置改法: 复制代码 代码如下: zlib.output_compression = On ;开启gzip功能 zlib.output_compression_level = 4 ;gzip压缩级别,1~9,建议3~5 ;zlib.output_handler = ;gzip压缩方式,建议注释 php文件改法: 建议在页面开头写上,可以写到头部公共文件 复制代码 代码如下:

  • IIS开启GZIP压缩效率对比及部署方法小结

    压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度.当然,同时也会增加一点点服务器的负担.GZIP是比较常见的一种HTTP压缩算法. 压缩测试在部署的IIS 6.0上配置了GZIP压缩,详细的测试结果如下.未开启GZIP压缩前,访问网站首页进行抓包分析.开启GZIP后,清空本地IE缓存,再次访问抓包分析.开启前后,页面大小减小了89213bytes,压缩掉原始大小的87%.当对CSS.JS等文件都开启GZIP压缩后,原21100bytes的文件,压缩后如图所示,压缩比为80

  • Nginx启用压缩及开启gzip 压缩的方法

    在nginx.conf文件的http模块新增以下内容 gzip             on; gzip_min_length  10k;  # 设置允许压缩的页面最小字节数 gzip_comp_level  6; gzip_vary        on; gzip_types       text/plain text/css application/javascript application/json application/xml text/xml image/png image/gif

随机推荐