精华内容
下载资源
问答
  • 配置nginx直接使用webpack生成的gz压缩文件 前言:vue cli3的性能优化里面,开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过...

    配置nginx直接使用webpack生成的gz压缩文件

     

    前言:vue cli3的性能优化里面,开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu;而且webpack打包时已经生成了压缩文件,完全没必要重新通过nginx再压缩一下。发现这个问题后,通过半天的资料查询找到了答案:**nginx gzip static静态压缩,**下面把我解决的过程记录一下。

     

    一、配置vue cli3 gzip

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    module.exports = {
    
        configureWebpack: config => {
    
        // 开发环境不需要gzip
        if (process.env.NODE_ENV !== 'production') return
    
            config.plugins.push(
                new CompressionWebpackPlugin({
                    // 正在匹配需要压缩的文件后缀
                    test: /.(js|css|svg|woff|ttf|json|html)$/,
                    // 大于10kb的会压缩
                    threshold: 10240
                    // 其余配置查看compression-webpack-plugin
                })
            )
        }
    }

     

    二、安装nginx ngx_http_gzip_module模块

    ##先下载nginx
    
    cd /nginx解压目录
    ./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
    
    ##上面的/usr/local/nginx为nginx安装目录,可根据自己喜好修改
    
    make
    make install

     

    三、配置nginx

    找到/usr/local/nginx/conf/nginx.conf,并添加下面代码

    server {
    
        listen 4300;
        server_name localhost;
    
        location / {
    
            root /home/static/web/wechat;
            index /index.html;
            try_files $uri $uri/ /index.html;
            gzip_static on; #静态压缩
    
        }
    
    }

    启动nginx服务:./nginx -c /usr/local/nginx/conf/nginx.conf

     

    四、查看效果

        1.打包后文件

        2. 浏览器访问资源结果

     

    展开全文
  • 通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu;而且webpack打包时已经生成了压缩...

    前言:vue cli3的性能优化里面,开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu;而且webpack打包时已经生成了压缩文件,完全没必要重新通过nginx再压缩一下。发现这个问题后,通过半天的资料查询找到了答案:**nginx gzip static静态压缩,**下面把我解决的过程记录一下。

    一、配置vue cli3 gzip

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    module.exports = {
    configureWebpack: config => {
    // 开发环境不需要gzip
    if (process.env.NODE_ENV !== 'production') return
    config.plugins.push(
    new CompressionWebpackPlugin({
    // 正在匹配需要压缩的文件后缀
    test: /.(js|css|svg|woff|ttf|json|html)$/,
    // 大于10kb的会压缩
    threshold: 10240
    // 其余配置查看compression-webpack-plugin
    })
    )
    }
    }

     

    二、安装nginx ngx_http_gzip_module模块

    • 先下载nginx

    • cd /nginx解压目录

    • ./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

    • 上面的/usr/local/nginx为nginx安装目录,可根据自己喜好修改

    • make

    • make install

    三、配置nginx

    找到/usr/local/nginx/conf/nginx.conf,并添加下面代码

    server {
        listen 4300;
        server_name localhost;
        location / {
            root /home/static/web/wechat;
            index /index.html;
            try_files $uri $uri/ /index.html;
            gzip_static on; #静态压缩
        }
    }
    

    启动nginx服务:./nginx -c /usr/local/nginx/conf/nginx.conf

    四、查看效果

        1.打包后文件

        2. 浏览器访问资源结果

     

    展开全文
  • WebPack的发布项目压缩

    2019-09-09 22:16:31
    构建时gzip(这个方式是推荐的,而且在本次的react项目gz化中也是使用了该方式得以成功) ...第一步:需要安装webpack压缩组件 Yarn add compression-webpack-plugin 或者 npm install compress...
    1. 构建时gzip(这个方式是推荐的,而且在本次的react项目gz化中也是使用了该方式得以成功)
        用Webpack的压缩插件生成bundle.js.gz 代替生成bundle.js。 之后添加一个中间件返回被 gzip 压缩的JS文件
    第一步:需要安装webpack压缩组件

    Yarn add compression-webpack-plugin
    或者
    npm install compression-webpack-plugin

    注意: 在使用compression-webpack-plugin的时候有一个版本问题,如果直接使用yarn add或者 npm install 的话,会默认安装到最新版本的,例如本次gz化时,默认的版本是^3.0.0这个时候会报以下的错误:

    在这里插入图片描述
    需要降低版本形式处理,如Yarn add compression-webpack-plugin@1.1.12,指定版本。

    第二步: 在webpack.config.prod.js中引入插件

    const CompressionPlugin=require('compression-webpack-plugin');

    第三步: 添加到插件数组中(module.exports下的plugins中添加)

    在这里插入图片描述

    参考网址:

    https://www.zcfy.cc/article/two-quick-ways-to-reduce-react-app-s-size-in-production-1930.html?tdsourcetag=s_pcqq_aiomsg
    (有两种方法在里面,但是构建时gzip这个可以成功,其他可以用来以后参考)

    展开全文
  • 所以,此篇介绍两种gzip压缩的方式:1、打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件;2、浏览器请求xx.js文件时,服务器对xx.js文件进行gz...

    开局一张图:

    d8d1261a714c03d8ef2bbc6bf943b5ef.png

    可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程。

    所以,此篇介绍两种gzip压缩的方式:

    1、打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件;

    2、浏览器请求xx.js文件时,服务器对xx.js文件进行gzip压缩后传输给浏览器。

    01webpack打包生成gz文件        

    安装插件(compression-webpack-plugin):

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

    vue.config.js文件进行webpack配置(没有此文件可以在项目根路径创建一个文件):

    const CompressionPlugin = require('compression-webpack-plugin');module.exports = {        plugins: [            new CompressionPlugin({                algorithm: 'gzip', // 使用gzip压缩                test: /\.js$|\.html$|\.css$/, // 匹配文件名                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)                minRatio: 1, // 压缩率小于1才会压缩                threshold: 10240, // 对超过10k的数据压缩                deleteOriginalAssets: false, // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)            }),        ],    },};

    这里对js、html、css文件进行了压缩处理,并没有进行图片压缩,因为图片压缩并不能实际减少文件大小,反而会导致打包后生成很多同大小的gz文件,得不偿失。

    当然了,上文提到过,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件,所以还需要在服务器配置一个属性,以期望它能正常返回我们需要的gz文件。

    这里拿nginx举例(nginx.conf文件):

    http {    include       mime.types;    default_type  application/octet-stream;    sendfile        on;    #tcp_nopush     on;    #keepalive_timeout  0;    keepalive_timeout  65;    gzip_static on;    server {        listen       8462;        server_name  localhost;        location / {            root   dist;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }}

    其中gzip_static on这个属性是静态加载本地的gz文件。

    看下效果:

    c20d3ca473efaa171a1a62e52263b243.png

    e98dcc0bbb12ef500fc4d3293a664c03.png

    gzip压缩比率在5-6倍,nginx配置了静态gz加载后,浏览器也返回的是gz文件,这样就会请求小文件而不会导致请求卡线程,并且,因为保留了源文件,所以当我们删除gz后,浏览器会自动去请求原始文件,而不会导致界面出现任何问题(如图二)。

    静态加载gz文件主要是依托于下面的请求头:

    f9788a85e1ae1d399d9839f98425bcc9.png

    02服务器在线gzip压缩      

    前端不用进行任何配置,也不用webpack生成gz文件,服务器进行处理,拿nginx举例:

    http {    include       mime.types;    default_type  application/octet-stream;    sendfile        on;    #tcp_nopush     on;    #keepalive_timeout  0;    keepalive_timeout  65;    # 开启gzip    gzip  on;        # 设置缓冲区大小    gzip_buffers 4 16k;        #压缩级别官网建议是6    gzip_comp_level 6;     #压缩的类型    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;    server {        listen       8462;        server_name  localhost;        location / {            root   dist;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }}

    上面有一些关于gzip的配置,首先是开启gzip,设置缓冲区大小,压缩的等级,需要压缩的文件等(如果需要更详细的配置,可以查看nginx的配置文档),看下效果:

    ceb82640e7c430351adfe90c63fafc75.png

    响应头中会携带gzip压缩配置,每次请求xx.js文件,服务器都会进行实时压缩。

    两种方案的优缺点:

    1、webpack打包,然后直接使用静态的gz,缺点就是打包后文件体积太大,但是不耗服务器性能;2、使用nginx在线gzip,缺点就是耗性能,需要实时压缩,但是vue打包后的文件体积小。

    以上就是两种gzip压缩的方案。

    期待能够对你有所帮助~~~

    展开全文
  • 前端使用compression-webpack-plugin插件,config中配置productionGzip: true即可,打包后会产生js、js.gz、js.map、css、css.gz、css.map这三类后缀文件,map是sourcemap生成的对应文件,gz压缩文件,js是正常...
  • 我们使用 compression-webpack-plugin 插件进行压缩。 npm install compression-webpack-plugin --save-dev 成功之后,在vue-config.js里配置 const CompressionPlugin = require("compression-webpack-plugin")...
  •   gzip on; gzip_disable "msie6"; gzip_buffers 32 4k; gzip_static on; 最主要的是gzip_static ...这一句,nginx 会优先匹配你的 gzip 文件来返回,如果没有就寻找相应资源进行 gzip 压缩再返回。...
  • 压缩插件 把需要用cdn加速的文件保存在本地在pubilc新建js文件夹放进去,保证打包后这些js也存在dist文件夹,方便运维拿文件上传到cdn地址进行加速 npm install compression-webpack-plugin --save-dev vue.config....
  • 当我们的项目越来越庞大是时候 会发现 即使做了code split 代码压缩...这个时候时候可以使用compression-webpack-plugin 这个插件 new CompressionWebpackPlugin({ //gzip 压缩 filename: '[path].gz[query]', t...
  • 前言:vue cli3的性能优化里面,...通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu...
  • 1.去node官网下载node.js 我的电脑是debian 9 x64系统,所以下载的文件为node-v10.15.0-linux-x64.tar.xz ...发现不能解压,报错,注意一下,此归档文件是tar.xz结尾的,与常见的gz.xz不一样,tar.xz 压缩比更高,...
  • 性能优化gzip压缩

    2019-04-26 14:35:03
    gzip压缩需要资源为.gz得文件。同时服务器需要设置开启gzip压缩。本文介绍webpack构建得项目中开启gzip压缩,以及nginx配置gzip。 如下是开启gzip压缩前后得网页加载对比 由上图可知,vendor的那个js加载时间从...
  • webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩...
  • vue打包时gzip压缩的两种方案

    千次阅读 2020-08-24 11:18:06
    1、打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件; 2、浏览器请求xx.js文件时,服务器对xx.js文件进行gzip压缩后传输给浏览器。 webpack打包生成gz...
  • Vue CLI3 开启gzip压缩

    2020-08-27 17:29:43
    webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩...
  • 出现警告的原因是因为我使用了compression-webpack-plugin压缩打包插件。打包之后命名都是空。 找到问题定位filename:属性filename: '[path].gz[query]'。 google最终找到原因是因为compression-webpack-plugin升级...
  • 首先项目安装compression-webpack-plugin模块 cnpm install compression-... filename: '[path].gz[query]', // 目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串 .
  • 最近在看webpack文档中的compression插件时看到了在gzip下面还有两种压缩方式,zopfli跟brotli。先放上官网链接webpack->compression。 在google上冲了一下浪,大致了解了一下,说是比gzip压缩率更高,压缩率级别...
  • 1.先下载 运行 npm install --save-dev compression-webpack-plugin 2.修改config/index.js 将productionGzip改成true 3.查看或修改webpack.prod.conf.js的配置 ...如果dist里面有.gz文件即为压缩成功...
  • 1、其实Vue本身不能做压缩打包之类的功能,他是靠webpack进行打包,而webpack有插件可以生产gz类型的文件。 2、当你把一个包含gz的静态资源放到nginx上,有web请求过来时,nginx如果开启了gzip,那么它会检测你的...
  • VUE页面优化

    2020-07-28 11:59:37
    1.使用第三方的CDN,webpack的externals配置,首页引用 2.压缩图片大小,懒加载 3.webpack 配置productionSourceMap,不生成map调试文件 ...4.wepack打包压缩文件生成gz的文件,配置configureWebpack 5.for循环必须加Key
  • vue项目的开发模式

    2017-03-06 10:07:28
    1 页面级开发 直接引入script标签2 工程性的开发webpack+loader vue-cli 用了webpack 就可以不用gulp了打包出来的build.js 会很大webpack 分开打包 代码拆分1)...spa-plugin4)后台开启压缩 gz/gzip5)异步加载组件r...
  • vue-cli3前端优化

    2020-04-24 16:35:06
    打包后会生成 .gz 压缩文件,减少文件资源体积,提升网络传输速率,优化web页面加载时间 原理: 浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型 服...
  • 在开发vue项目的时候,对整个项目会有一些配置。...可以如果提前将压缩文件存放在服务器中,服务器在处理请求的时候将节省资源的压缩时间,直接读取服务器上的.gz文件。 在vue-cli2中,只需要将config/ind
  • 性能提升简版

    2018-08-01 05:50:33
    代码分割图片压缩和懒加载又拍云针对html/css/js,默认开启gzip压缩压缩比率大约70%(这里也可以自行设置,毕竟gz解析也耗时),cdn缓存时间可自行配置;这一点就解决了前两项;有关资源合并和压缩多是为了减少...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

webpack压缩gz