vue项目优化实战-开启gzip压缩

Posted 前端开发笔记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目优化实战-开启gzip压缩相关的知识,希望对你有一定的参考价值。

vue项目优化实战-开启gzip压缩


vue项目优化实战-开启gzip压缩

     【文末有福利


gzip(GNU- ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会快得多。gzip的压缩页面需要浏览器和服务器双方都支持,实际上就是服务器端压缩,传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心,因为目前的大多数浏览器都支持解析gzip压缩过的资源文件。在实际的应用中我们发现压缩的比率往往在3到10倍,也就是本来50k大小的页面,采用压缩后实际传输的内容大小只有5至15k大小,这可以大大节省服务器的网络带宽,同时如果应用程序的响应足够快时,网站的速度瓶颈就转到了网络的传输速度上,因此内容压缩后就可以大大的提升页面的浏览速度。

实现gzip压缩的方式有多种,比如:nginx、tomcat、java等,选用其中一种即可。 拿Vue-cli3.0项目来说,注意是Vue-cli3.0而不是vue3.0

1, 开启gzip压缩


首先安装ompression-webpack-plugin这个插件


npm i compression-webpack-plugin@5.0.1


在vue.config.js中引入


const CompressionWebpackPlugin = require('compression-webpack-plugin')//然后配置需要压缩的资源,依次是,js文件,css样式文件,字体文件,json文件,jpg类型的图片,png类型的图片const productionGzipExtensions = ['js', 'css',’ttf’,’json’,’jpg’,’png’]
在configureWebpack中的plugins中添加 plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ]


同样 nginx 上也需要配置, 在nginx中的conf文件中的server{}中配置加上如下代码

gzip on; gzip_static on; gzip_buffers 4 16k; gzip_comp_level 8; gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型       gzip_vary on;


2,删除console.log


在调试项目中,经常会用console打印结果进行调试,当我们发布的时候又不能将这些打印的结果开放出去,所以我们需要删除console。这就需要安装一个插件。


安装插件


npm install terser-webpack-plugin --save-dev


如果是webpack4,则使用


npm install terser-webpack-plugin@4.2.3 --save-dev


在vue.config.js中引入


const TerserPlugin = require('terser-webpack-plugin')


同样在configureWebpack项中的optimization

对象中配置如下代码

 

minimizer: [ new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'], // 移除console }, }, }), ],


以上就是在项目中比较常用的优化措施了。


加入“前端开发笔记第二小组”,即可获得价值

399元的前端课程一份


vue项目优化实战-开启gzip压缩

二维码截止日期3/11



vue项目优化实战-开启gzip压缩

扫描二维码获取

更多精彩

前端开发笔记

vue项目优化实战-开启gzip压缩
vue项目优化实战-开启gzip压缩


vue项目优化实战-开启gzip压缩

点个

在看

你最好看


以上是关于vue项目优化实战-开启gzip压缩的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目实战67上线-开启gzip和配置HTTPS服务

VUE项目实战67上线-开启gzip和配置HTTPS服务

vite3+vue3 项目打包优化实战之-视图分析(rollup-plugin-visualizer)CDN引入依赖分包gzip压缩history404问题

vue 开启gzip ,nginx 配置gzip

Vue CLI3 开启gzip压缩

Vue CLI3 开启gzip压缩