经验与坑Vue项目性能优化——Gzip

Posted 2021-08-07 码农智涵的程序人生

这是前端项目写完后的状况，首页加载速度简直慢到怀疑人生。

那么借助这个机会来学习一下，前端项目 准确的说是Vue项目该如何优化呢？

根据查阅网络资料，大致分为五个部分优化项目。

在项目根目录下添加 vue.config.js 文件，并关闭 productionSourceMap，在配置文件下写入如下内容：

module.exports = { productionSourceMap: false}

（1）开启Gzip压缩

注意：前端配置了Gzip插件，服务器的nginx也必须开启Gzip才能生效。

首先下载安装插件。

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

继续在vue.config.js 文件中添加配置信息。

//是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';
//gzip压缩const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = { productionSourceMap: false, configureWebpack: config =>{ //生产环境配置 if (isProduction){ //gzip压缩 const productionGzipExtentions = ['html','js','css'] config.plugins.push( new CompressionWebpackPlugin({ filename:'[path].gz[query]', algorithm:'gzip', test: new RegExp( '\\.(' + productionGzipExtensions.join('|') + ')$' ), threshold: 10240, // 只有大小大于该值的资源会被处理 10240 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 }) ) } }}

打开 nginx 文件夹下的 nginx.conf 文件，在 http 模块中写入以下内容：

 #开启Gzip gzip on; #设置gzip压缩的最小文件，小鱼设置值的文件不会被压缩 gzip_min_length 1k; # gzip 压缩级别 1-9 数字越大压缩越好，但是也越占用cpu时间 gzip_comp_level 2; #进行压缩的文件类型 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
 # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on;
 # 设置压缩所需要的缓冲区大小  gzip_buffers 4 16k;

结束后在前端的项目根目录下写入命令：

npm run build --report

可以看到压缩效果是相当明显的。

（2）使用插件去除 console warning debugger等没啥用的东西

npm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const isProduction = process.env.NODE_ENV === 'production';
 configureWebpack: config => { const plugins = []; if (isProduction) { plugins.push( new UglifyJsPlugin({ uglifyOptions: { output: { comments: false, // 去掉注释 }, warnings: false, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log']//移除console } } }) ) } },

这一步其实可以忽略，经过实验打包后的体积也就能减少 10-30kb左右，加载速度也没基本没什么提升。

（3）【选配】部分插件启用CDN加速

虽然CDN很快，但是并没有本地打包的稳定。

将使用的插件使用cdn 链接，并且配置 webpack 将使用 CDN 的插件不进行打包，当然还要在 index.html 中引入js以及css