vue-cli3构建的项目使用compression-webpack-plugin 进行GZip压缩

使用compression-webpack-plugin在vue-cli3项目中实现GZip压缩

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

原创最新推荐文章于 2024-08-30 10:14:23 发布 · 763 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue-cli 同时被 2 个专栏收录

1 篇文章

订阅专栏

compression-webpack-plugin

1 篇文章

订阅专栏

本文介绍了如何在基于vue-cli3构建的项目中使用compression-webpack-plugin进行GZip压缩，包括插件的安装、vue.config.js的配置以及nginx的设置步骤。

部署运行你感兴趣的模型镜像

vue-cli3构建的项目使用compression-webpack-plugin 进行GZip压缩

1.安装compression-webpack-plugin插件

需要按照webpack的版本对应选择插件的版本

2配置vue.config.js

在configureWebpack的plugins中添加插件

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", “css”];

new CompressionWebpackPlugin({
     filename: "[path][base].gz",
     algorithm: "gzip",
     test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
     threshold: 10240, //对10K以上的数据进行压缩
     minRatio: 0.8,
     deleteOriginalAssets: false //是否删除源文件
 })

3.配置nginx

在http中全局开启gzip：

gzip  off;
gzip_static on;
gzip_min_length 10k;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types application/javascript application/css text/css text/javascript;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;

开启gzip模块需要在nginx上增加模快—http_gzip_static,可以通过./nginx -V查看之前安装编译nginx的选项，如果没有，则须添加此模块

您可能感兴趣的与本文相关的镜像