Vue 发布文件压缩

介绍

compression-webpack-plugin它是一个Vue发布文件的压缩算法。针对Vue打包的文件过大，首屏加载过慢，通过compression-webpack-plugin生成指定的、体积更小的压缩文件，让浏览器能够更快的加载资源。

gzip如何被加载

gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。

compression-webpack-plugin版本

compression-webpack-plugin得和你项目中的webpack匹配，否则会出现问题。

compression-webpack-plugin是10.x， 则webpack需要5.x 
compression-webpack-plugin是9.x，  则webpack需要5.x 
compression-webpack-plugin是8.x，  则webpack需要5.x 
compression-webpack-plugin是7.x，  则webpack需要5.x 
compression-webpack-plugin是5.x，  则webpack需要4.x或者5.x 
compression-webpack-plugin是4.x，  则webpack需要4.x

安装

yarn add compression-webpack-plugin@版本 --D
yarn add compression-webpack-plugin@4.0.1 --D

配置

第一种设置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
      // 生产环境相关配置
      if (isProduction) {
        //gzip压缩
        const productionGzipExtensions = ['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 // 删除原文件
            })
        )
      }
  }
}

第二种设置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  productionSourceMap: false,
  configureWebpack() {

    const productionGzipExtensions = ['html', 'js', 'css']

    return {
      plugins: [
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        }),
      ],
    }
  },
}

可以看下压缩效果，文件大小小了至少1/3。

Nginx配置

http {

	gzip  on;
    gzip_buffers  16 64k;
    gzip_comp_level  6;
    gzip_min_length  1k;
    gzip_vary  on;
    gzip_types  text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml text/javascript;
    
	server {
		...
	}
}

问题

在打包过程中，可能会遇到“TypeError: Cannot read property ‘tapPromise’ of undefined”这样的错误

这是由于安装的“compression-webpack-plugin”版本太高导致的，通过安装低版本即可解决（cnpm i -D compression-webpack-plugin@4.0.1）

参考

你真的了解 gzip 吗？ - 知乎 (zhihu.com)