首页 > Vue >

vue打包之compression-webpack-plugin实现gzip压缩

时间: 作者:admin 浏览:

上一篇代码打包分块已经讲解完了:

chainWebpack之optimization.splitChunks的cacheGroups缓存组代码分块实践案

当项目较大的时候,合理的分块打包可以大大降低页面资源加载的耗时,让waterfall时间变得更短,页面打开更快,实现就算在低性能引擎的浏览器也能获得良好的用户体验,毕竟不是谁都能V8,好吧,这次要说的是继vue打包分块之后的又一加速利器:gzip压缩,可以让打包文件变得更小,首先要声明的是,前端要使用gzip压缩,必须要后端开启服务器的gzip功能,如果是nginx,开始的办法小编大概知道是在nginx.config文件里,设置转发url的地方加上:

gzip_static on

好像还可以配置哪种文件类型(js|css|png|woff|ttf|eot|svg)支持gzip,具体的找项目的后端配置就是了,很简单的,后端开启了gzip服务以后,前端就可将代码文件打包成gz扩展名的压缩文件上传到服务器使用,压缩后的文件体积跟window系统的zip压缩软件压缩后的大小一样,可以说真的是一把利器;
前端压缩所用的插件就是compression-webpack-plugin了:

npm i compression-webpack-plugin --save-dev

安装好后,在vue.config.js配置如下:

const compressionPlugin = require("compression-webpack-plugin")

module.exports = {
    configureWebpack: {
        plugins: [
            new compressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i,
                //threshold: 10240,//文件大于这个值(10K)的才压缩,默认为0
                minRatio: 1,//默认为0.8,能压缩到小于等于原来的80%才压缩,小编这里觉得能压缩就行,其实有些文件压缩反而变大的
                deleteOriginalAssets: true//压缩完是否删除源文件
            })
        ]
    }
}

这样设置以后,打包完基本上整个dist文件夹里全是gz压缩包,直接上传到服务器,网页加载速度真的是飞快,可以说,分块和压缩做完之后,整个项目都想变得非常小,简直是完美搭配;

设置后有可能发起本地npm run dev启动项目的时候,会报错,判断一下生成环境才使用这个插件就好;

快去试试吧

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4