精华内容
下载资源
问答
  • webPack 打包压缩gizp

    千次阅读 2019-06-17 14:42:35
    compression-webpack-plugin非常好用的压缩插件,适用于vue-cli版本2以上 查看安装vue-cli版本 修改config下的index.js 这时候 npm run build 会打包失败 缺少依赖,安装(一定要带版本号) cnpm install --...

    compression-webpack-plugin非常好用的压缩插件,适用于vue-cli版本2以上
    查看安装vue-cli版本

    修改config下的index.js

    这时候 npm run build 会打包失败

    缺少依赖,安装(一定要带版本号

    cnpm install --save-dev compression-webpack-plugin@1.1.12

     错误信息详细参考:https://www.cnblogs.com/donghuang/p/10045688.html

    会生成 .gz的文件,能比之前的压缩体积再减小一半。 

    展开全文
  • 通过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. 浏览器访问资源结果

     

    展开全文
  • 配置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. 浏览器访问资源结果

     

    展开全文
  • 17-webpack 压缩图片

    2019-07-24 10:32:12
    但是这些图片都是未经压缩的原尺寸,webpack 通过 image-webpack-loader 压缩图片。 一、添加图片 在 src 目录下添加 icon.jpg 图片,编辑index.js import "./style.css" import Icon from './icon.jpg'; //生成一个...

    07-加载图片 之后,便可以正常加载和显示图片了;但是这些图片都是未经压缩的原尺寸,webpack 通过 image-webpack-loader 压缩图片。

    一、添加图片

    在 src 目录下添加 icon.jpg 图片,编辑index.js

    import "./style.css"
    import Icon from './icon.jpg';
    //生成一个内容为Hello webpack !的div标签
    function component() {
        let element = document.createElement('div');
        element.innerHTML = "Hello webpack !";
        //添加class
        element.classList.add("hello");
        return element;
    }
    //将生成的div标签添加到body中去
    document.body.appendChild(component());
    
    
    function addImage() {
        let element = document.createElement('img');
        //设置图片路径
        element.src = Icon;
        //添加class
        element.classList.add("image");
        return element;
    }
    //将生成的img标签添加到body中去
    document.body.appendChild(addImage());
    

    编辑 style.css

    .hello{
        color: red;
    }
    .image{
        width: 200px;
        height: 200px;
    }
    

    编辑 webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin  = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
    
    module.exports = {
        entry: './src/index.js',
        mode:"production",
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[
                        "style-loader",
                    ]
                },
                {
                    test:/\.css$/,
                    use:[
                        {
                            loader:MiniCssExtractPlugin.loader,
                            options:{
                                publicPath:'../'
                            }
                        },
                        "css-loader"
                    ]
                },
                //添加loader
                {
                    test:/\.(png|svg|jpg|gif)$/,
                    use:[
                        "file-loader"
                    ]
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: "15- webpack 压缩 JavaScript 代码",
                minify: {
                    collapseWhitespace: true,//删除空格、换行
                },
            }),
            //添加插件
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css"
            }),
            //添加插件
            new OptimizeCSSAssetsPlugin({})
        ],
    };
    

    编译成功

    $ webpack
    Hash: 9c47c45174524a79d630
    Version: webpack 4.35.3
    Time: 723ms
    Built at: 07/24/2019 10:14:38 AM
                                   Asset       Size  Chunks             Chunk Names
    76e7e08e0b3a04a612c89ad13c999813.jpg     51 KiB          [emitted]  
                              index.html  219 bytes          [emitted]  
                          main.bundle.js   6.25 KiB       0  [emitted]  main
                                main.css   49 bytes       0  [emitted]  main
    Entrypoint main = main.css main.bundle.js
    
    

    此时图片大小为 51 KiB(macOS Mojave 10.14.6 )

    二、安装

    npm install image-webpack-loader --save-dev
    //
    yarn add image-webpack-loader --dev
    

    安装成功

    yarn add v1.16.0
    [1/4] ?  Resolving packages...
    [2/4] ?  Fetching packages...
    [3/4] ?  Linking dependencies...
    [4/4] ?  Building fresh packages...
    success Saved lockfile.
    success Saved 133 new dependencies.
    info Direct dependencies
    └─ image-webpack-loader@5.0.0
    info All dependencies
    ├─ @mrmlnc/readdir-enhanced@2.2.1
    ├─ @nodelib/fs.stat@1.1.3
    ├─ @sindresorhus/is@0.7.0
    ├─ arch@2.1.1
    ├─ archive-type@4.0.0
    ├─ array-find-index@1.0.2
    ├─ array-union@1.0.2
    ├─ array-uniq@1.0.3
    ├─ arrify@1.0.1
    ├─ bin-check@4.1.0
    ├─ bin-version-check@4.0.0
    ├─ bin-version@3.1.0
    ├─ bl@1.2.2
    ├─ buffer-alloc-unsafe@1.1.0
    ├─ buffer-alloc@1.2.0
    ├─ buffer-crc32@0.2.13
    ├─ buffer-fill@1.0.0
    ├─ cacheable-request@2.1.4
    ├─ call-me-maybe@1.0.1
    ├─ camelcase-keys@2.1.0
    ├─ caw@2.0.1
    ├─ clone-response@1.0.2
    ├─ config-chain@1.1.12
    ├─ console-stream@0.1.1
    ├─ currently-unhandled@0.4.1
    ├─ cwebp-bin@5.1.0
    ├─ decompress-response@3.3.0
    ├─ decompress-tar@4.1.1
    ├─ decompress-tarbz2@4.1.1
    ├─ decompress-targz@4.1.1
    ├─ decompress-unzip@4.0.1
    ├─ decompress@4.2.0
    ├─ dir-glob@2.0.0
    ├─ download@6.2.5
    ├─ executable@4.1.1
    ├─ ext-list@2.2.2
    ├─ fast-glob@2.2.7
    ├─ fd-slicer@1.1.0
    ├─ figures@1.7.0
    ├─ filename-reserved-regex@2.0.0
    ├─ find-versions@3.1.0
    ├─ fs-constants@1.0.0
    ├─ get-proxy@2.1.0
    ├─ get-stream@3.0.0
    ├─ gifsicle@4.0.1
    ├─ glob-to-regexp@0.3.0
    ├─ globby@8.0.2
    ├─ got@7.1.0
    ├─ graceful-readlink@1.0.1
    ├─ has-ansi@2.0.0
    ├─ has-symbol-support-x@1.4.2
    ├─ has-to-string-tag-x@1.4.1
    ├─ hosted-git-info@2.7.1
    ├─ http-cache-semantics@3.8.1
    ├─ ignore@3.3.10
    ├─ image-webpack-loader@5.0.0
    ├─ imagemin-gifsicle@6.0.1
    ├─ imagemin-mozjpeg@8.0.0
    ├─ imagemin-optipng@6.0.0
    ├─ imagemin-pngquant@6.0.1
    ├─ imagemin-svgo@7.0.0
    ├─ imagemin-webp@5.1.0
    ├─ imagemin@6.1.0
    ├─ import-lazy@3.1.0
    ├─ into-stream@3.1.0
    ├─ is-cwebp-readable@2.0.1
    ├─ is-finite@1.0.2
    ├─ is-gif@3.0.0
    ├─ is-jpg@2.0.0
    ├─ is-natural-number@4.0.1
    ├─ is-object@1.0.1
    ├─ is-retry-allowed@1.1.0
    ├─ is-utf8@0.2.1
    ├─ json-buffer@3.0.0
    ├─ keyv@3.0.0
    ├─ load-json-file@1.1.0
    ├─ longest@1.0.1
    ├─ loud-rejection@1.6.0
    ├─ lpad-align@1.1.2
    ├─ make-dir@1.3.0
    ├─ map-obj@1.0.1
    ├─ meow@3.7.0
    ├─ merge2@1.2.3
    ├─ mime-db@1.40.0
    ├─ mozjpeg@6.0.1
    ├─ normalize-package-data@2.5.0
    ├─ npm-conf@1.1.3
    ├─ optipng-bin@5.1.0
    ├─ os-filter-obj@2.0.0
    ├─ p-cancelable@0.3.0
    ├─ p-event@1.3.0
    ├─ p-map-series@1.0.0
    ├─ p-pipe@1.2.0
    ├─ p-reduce@1.0.0
    ├─ path-parse@1.0.6
    ├─ path-type@3.0.0
    ├─ pend@1.2.0
    ├─ pinkie@2.0.4
    ├─ pngquant-bin@5.0.2
    ├─ proto-list@1.2.4
    ├─ pseudomap@1.0.2
    ├─ read-pkg-up@1.0.1
    ├─ read-pkg@1.1.0
    ├─ redent@1.0.0
    ├─ repeating@2.0.1
    ├─ replace-ext@1.0.0
    ├─ resolve@1.11.1
    ├─ responselike@1.0.2
    ├─ seek-bzip@1.0.5
    ├─ semver-regex@2.0.0
    ├─ semver-truncate@1.1.2
    ├─ slash@1.0.0
    ├─ sort-keys-length@1.0.1
    ├─ spdx-correct@3.1.0
    ├─ spdx-exceptions@2.2.0
    ├─ squeak@1.3.0
    ├─ strip-bom@2.0.0
    ├─ strip-dirs@2.1.0
    ├─ strip-indent@1.0.1
    ├─ strip-outer@1.0.1
    ├─ tar-stream@1.6.2
    ├─ temp-dir@1.0.0
    ├─ through@2.3.8
    ├─ timed-out@4.0.1
    ├─ to-buffer@1.1.1
    ├─ trim-newlines@1.0.0
    ├─ trim-repeated@1.0.0
    ├─ tunnel-agent@0.6.0
    ├─ unbzip2-stream@1.3.3
    ├─ url-parse-lax@1.0.0
    ├─ uuid@3.3.2
    ├─ validate-npm-package-license@3.0.4
    └─ yauzl@2.10.0
    ✨  Done in 173.11s.
    
    

    三、编辑 webpack.config.js

    添加到 file-loader 之后

    const path = require('path');
    const HtmlWebpackPlugin  = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
    
    module.exports = {
        entry: './src/index.js',
        mode:"production",
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[
                        "style-loader",
                    ]
                },
                {
                    test:/\.css$/,
                    use:[
                        {
                            loader:MiniCssExtractPlugin.loader,
                            options:{
                                publicPath:'../'
                            }
                        },
                        "css-loader"
                    ]
                },
                //添加loader
                {
                    test:/\.(png|svg|jpg|gif)$/,
                    use:[
                        "file-loader",
                        'image-webpack-loader',
                    ]
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: "15- webpack 压缩 JavaScript 代码",
                minify: {
                    collapseWhitespace: true,//删除空格、换行
                },
            }),
            //添加插件
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css"
            }),
            //添加插件
            new OptimizeCSSAssetsPlugin({})
        ],
    };
    

    四、编译

    编译成功

    $ webpack
    Hash: 14356f459fdacd0931b6
    Version: webpack 4.35.3
    Time: 889ms
    Built at: 07/24/2019 10:16:12 AM
                                   Asset       Size  Chunks             Chunk Names
    eae72b240e59132a25b17eda6c27041e.jpg   22.4 KiB          [emitted]  
                              index.html  219 bytes          [emitted]  
                          main.bundle.js   6.25 KiB       0  [emitted]  main
                                main.css   49 bytes       0  [emitted]  main
    Entrypoint main = main.css main.bundle.js
    
    

    此时图片大小为 51 KiB(macOS Mojave 10.14.6 )

    五、对比图片尺寸

    图片大小尺寸从51KiB变成22.4 KiB,并且 index.html能够正常显示图片。

    参考链接

    展开全文
  • webpack 开启gzip压缩

    千次阅读 2020-08-17 19:26:23
    Webpack 配置 const CompressionWebpackPlugin = require('compression-webpack-plugin'); { plugins: [ new CompressionWebpackPlugin({ // options }) ] ... #gizp压缩起点,文件大于1k才.
  • 前端使用compression-webpack-plugin插件,config中配置productionGzip: true即可,打包后会产生js、js.gz、js.map、css、css.gz、css.map这三类后缀文件,map是sourcemap生成的对应文件,gz压缩文件,js是正常...
  • Gzip是若干种文件压缩程序的简称,通常指GNU计划的实现,此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。 在压缩优化方面的作用 通过gzip这个压缩程序,对资源进行压缩,从而降低请求资源的文件大小。 ...
  • webpack将文件打成压缩包

    千次阅读 2019-06-19 10:43:07
    英文好的直接看文档 ...引包 npm install filemanager-webpack-plugin --save-dev 修改配置文件 ./build/webpack.dev.conf.js // 引包 const FileManagerPlugin = require('file...
  • webpack 使用zip压缩注意事项

    千次阅读 2018-11-15 09:17:21
    webpack有一个compression-webpack-plugin插件,可以打包成gzip格式部署到服务器,了解到了GZIP,其实GZIP有很多点,这里我们只讨论前端范围内GZIP的应用。 什么是GZIP ? GZIP是网站压缩加速的一种技术,GZIP最早...
  • 在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件,减少项目体积后,还是觉得项目加载速度慢,效果不尽如人意的时候,还有一个“瘦身项目”可以完成,那就是利用nginx和webpack来使用gzip压缩功能。...
  • vue/webpack gzip文件压缩

    2019-07-12 15:46:38
    安装compression-webpack-plugin npm install --save-dev compression-webpack-plugn /config/index.js配置 productionGzip:true productionGzipExtensions:['js', 'css'] /build/webpack.prod.conf.js配置 if( ...
  • WebPack的发布项目压缩

    2019-09-09 22:16:31
    构建时gzip(这个方式是推荐的,而且在本次的react项目gz化中也是使用了该方式得以成功) ...第一步:需要安装webpack压缩组件 Yarn add compression-webpack-plugin 或者 npm install compress...
  •   gzip on; gzip_disable "msie6"; gzip_buffers 32 4k; gzip_static on; 最主要的是gzip_static ...这一句,nginx 会优先匹配你的 gzip 文件来返回,如果没有就寻找相应资源进行 gzip 压缩再返回。...
  • Webpack插件允许您在构建之前和之后复制,存档(.zip / .tar / .tar.gz),移动,删除文件和目录 安装 npm install filemanager-webpack-plugin --save-dev # or yarn add filemanager-webpack-plugin --dev 用法 ...
  • http压缩之Gzip
  • vue 使用webpack打包图片,GZIP打包js和css压缩 1.打包压缩图片 ① 输入命令安装file-loader npm i -D file-loader ② 在webpack.config.js中的rules数组中添加file-loader的相关配置 require("image-webpack-...
  • Vue CLI开启webpack打包gzip压缩webpack打包过程中开启gzip压缩,能够有效的压缩js、css、html文件,加快页面的加载速度。 我们只需要在vue.config.js文件中加入配置,就可以在打包过程中将相应的文件进行gzip...
  • #2.1 登录页面(打开网站的第一个页面)图片#2.2 Router懒加载#2.3 引入外部CDN#2.4 启用 Gzip 压缩#3 验证#3.1 打包 Vue 上线优化方案 #1 为什么要引入外部CDN 最近博客上线,但是在首次加载的时候,需要消耗很多时间,...
  • 网上一搜,大部分是类似的结果,先是在webpack中配置CompressionPlugin插件,在打包时就进行一次压缩,生成对应的gz后缀文件,然后是nginx开启gzip功能。 上面的说法错误了吗?没有,但是所有都忽略了一个地方,或者...
  • 前情:原本是打包出来发现包很大,想关闭sourcemap的,然后在根目录创建vue.config.js文件不生效,查查查,搜搜搜,看到一个网友说vue-cli跑项目建vue.config.js文件,webpack跑项目建webpack.config.js文件...
  • 经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会快得多。 那么客户端和服务器之间是如何通信来支持gzip的呢?通过下图我们可以很清晰的了解。 nginx启用gzip gzip on; # 开启...
  • 当前端项目过大时,可以利用nginx请求配置和webpack来使用gzip压缩功能; Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络...
  • const webpack = require('webpack'); const path = require('path'); /** * Plugin that simplifies creation of HTML files to serve your bundles * npm i --save-dev html-webpack-plugin * @type {...
  • 开启gzip压缩-webpack插件

    千次阅读 2019-08-16 18:07:45
    我们使用 compression-webpack-plugin 插件进行压缩。 安装: npm install compression-webpack-plugin --save-dev 。compression-webpack-plugin 详细用法使用: const CompressionPlugin = require("compression-...
  • 之前项目搭建的时候没做代码压缩。随着项目越来越大,问题来了,加载速度缓慢,偶尔加载不出来白屏 原因分析: 查看了下加载的文件,发现chunk文件真多,文件还挺大,加载不慢才怪, 解决方案: 先对代码压缩一波...
  • Vue使用compression-webpack-plugin进行代码压缩 一、安装插件 npm install compression-webpack-plugin --save-dev 二、配置vue.config.js const CompressionPlugin = require("compression-webpack-plugin") ...
  • 自动压缩图片通常在webpack构建项目时接入一些第三方Loader&Plugin来处理。打开Github,搜素webpack image等关键字,Star最多还是image-webpack-loader和imagemin-webpack-plugin这两个Loader&Plugin。很多同学可能...
  • 自动压缩图片通常在webpack构建项目时接入一些第三方Loader&Plugin来处理。打开Github,搜素webpack image等关键字,Star最多还是image-webpack-loader和imagemin-webpack-plugin这两个Loader&Plugin。很多同学可能...
  • gzip是一种文件压缩格式,浏览器可以自动解压这种格式,服务器返回的是gzip的格式文件时,response的头部会有 Content-Encoding: gzip这样的头部告诉浏览器:“我返回的是gzip格式文件,你要用对应的方法去解压它”...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,704
精华内容 681
关键字:

webpack压缩gz