vue项目使用compression-webpack-plugin打包优化

最新推荐文章于 2024-08-30 10:14:23 发布

V_AYA_V

最新推荐文章于 2024-08-30 10:14:23 发布

阅读量1.1k

点赞数

分类专栏： vue 工具文章标签： vue javascript js

本文链接：https://blog.csdn.net/V_AYA_V/article/details/115211423

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

工具

4 篇文章 0 订阅

订阅专栏

前端项目越来越大，导致首页加载缓慢，了解到compression-webpack-plugin插件能够将项目代码打包压缩，如果要使用需要配合nginx达到提升网页加载速度效果。插件文档传送门

先放一波压缩前和压缩后的对比

压缩前：
在这里插入图片描述
压缩后：压缩前项目大小

可以看出来经过压缩后项目缩小的不是一个等级，接下来介绍插件使用

安装插件

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

配置vue.config.js（压缩配置可以参考官方文档，根据自己需求选择）

const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
config.plugins.push(
  new CompressionWebpackPlugin({
     filename: '[path][base].gz', //压缩后的文件名
     algorithm: 'gzip', //压缩算法/功能
     test: /\.(js|css)(\?.*)?$/i, //匹配项目文件，以js或者以css结尾的才执行压缩
     threshold: 10240, //仅处理大于此大小的资产（以字节为单位）
     minRatio: 0.8, //仅压缩比该比率更好的资产（minRatio = Compressed Size / Original Size）
     deleteOriginalAssets: true //是否删除原始文件
   }
  )
}

项目打包

npm run build

nginx配置

server{
  listen xxxx;
  server_name localhost;

  gzip on; //启用nginx压缩
  gzip_min_length 1k;
  gzip_comp_level 9;
  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;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.";

  location /appShare {
     ...
  }
}