vue打包,减少js、css、woff等静态资源大小提高访问速度

最新推荐文章于 2023-06-28 11:52:20 发布

剑锋不停歇

最新推荐文章于 2023-06-28 11:52:20 发布

阅读量911

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq187363147/article/details/117354809

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、安装压缩插件

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

目前只能安装5.0左右的版本，如果安装7或者8的版本打包会报错

2、修改vue.config.js配置文件

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')//这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css', 'woff']//对什么文件进行压缩
module.exports = {
	//这里是自己的配置
    configureWebpack: {
      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略，从而使得打包变快，文件变小
        // 下面是压缩打包插件的配置
        new CompressionWebpackPlugin({
          algorithm: 'gzip',//压缩算法
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//处理所有匹配此 {RegExp} 的资源
          threshold: 10240,//只处理比这个值大的资源。按字节计算
          minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        }),
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 5, //控制打包生成js的个数
          minChunkSize: 100
        })
      ]
    },

3、修改Nginx 配置

gzip  on;
    gzip_min_length  200;
    gzip_buffers     32 4k;
    gzip_http_version 1.1;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/font-woff;
    gzip_vary on;

nginx重新加载配置后，

访问资源证明已经生效了