Vue 打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)

·  阅读 2797
  • 主篇 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

  • 附带:nvm 安装与使用 nodejs 版本管理

  • 根据主篇内容继续通过 compression-webpack-plugin 插件处理 chunk-vendors.js 文件过大的问题。

  • 创建 vue.config.js 文件,后续配置都需要用到配置文件。

  • 前端将文件打包成 .gz 文件,然后通过 nginx 的配置,让浏览器直接解析 .gz 文件,可以大大提升文件加载的速度,浏览器可以直接解析 .gz 文件并解压。

  • 压缩文件格式介绍

    • .gz:浏览器可以直接解析并解压。

    • .brBR 文件是使用 Brotli(一种开源数据压缩算法)压缩的文件,它包含网页资产,例如 CSSXMLSVGJS 文件,以 Brotli 压缩数据格式压缩。 Web 浏览器(例如 ChromeFirefox)使用 BR 文件来提高页面加载速度,Brotli 数据压缩格式旨在替代 Zopfli 压缩算法,该格式允许的压缩率比Zopfli 高大约 20%

    • .br 压缩需要基于 nodejs >=v10.16.0 版本才能生成,一般本地没问题,需要注意线上服务器会可能发生找不到 zlib 的情况并进行安装。

  • 安装插件

    • npm 安装

      // 安装报错的话看下面注释,用下面的版本进行安装
      $ npm install --save-dev compression-webpack-plugin
      
      // 由于安装最新版本会安装失败,报错 unable to resolve dependency tree
      // 所以需要找一个低版本的进行安装,如果不知道安装什么版本合适,就直接去 npm 官网找到这个组件,找到发布版本列表,一个一个的从新到旧安装,直到成功为止!
      // 上面的如果安装失败就先用这个版本,或者可以按照上句话所说的去尽量安装新的版本
      $ npm install --save-dev compression-webpack-plugin@6.1.1
      复制代码
    • yarn 安装(跟上面同理)

      $ yarn add compression-webpack-plugin --save-dev
      复制代码
  • 修改 vue.config.js,拷贝帖进去即可,然后 $ npm run build 进行打包测试 (jscss),会发现有了 .gz 文件,如果添加 .br 压缩支持,也会多了 .br 文件。

    const path = require('path');
    
    const webpack = require('webpack')
    const CompressionPlugin = require('compression-webpack-plugin')
    const zlib = require('zlib')
    const isProduction = process.env.NODE_ENV === 'production'
    
    module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            '@': path.resolve(__dirname, './src'),
            '@i': path.resolve(__dirname, './src/assets'),
          }
        },
        plugins: [
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
          // 下面两项配置才是 compression-webpack-plugin 压缩配置
          // 压缩成 .gz 文件
          new CompressionPlugin({
            filename: '[path][base].gz',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
          }),
          // 压缩成 .br 文件,如果 zlib 报错无法解决,可以注释这段使用代码,一般本地没问题,需要注意线上服务器会可能发生找不到 zlib 的情况。
          new CompressionPlugin({
            filename: '[path][base].br',
            algorithm: 'brotliCompress',
            test: /\.(js|css|html|svg)$/,
            compressionOptions: {
              params: {
                [zlib.constants.BROTLI_PARAM_QUALITY]: 11
              }
            },
            threshold: 10240,
            minRatio: 0.8
          })
        ]
      }
    }
    复制代码

    image.png

    image.png

  • Nginx 配置,找到当前 Vue 项目对应的 Server 追加下面 compression-webpack-plugin 相关配置,然后重启 Nginx

    下面的配置主要是开启服务器压缩功能,如果本地不压缩成 .gz 文件,服务器就需要压缩,但是这样会消耗服务器性能,所以上面前端通过插件打包时就压缩出来 .gz 文件,这样访问服务器就只需要读取下载即可,服务器不需要走一次压缩,减少服务器开销!

    server{
        listen 8088;
        server_name localhost;
        
        # compression-webpack-plugin 配置
        gzip on;
        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 条件,支持正则,此处表示 ie6 及以下不启用 gzip(因为ie低版本不支持)
        gzip_disable "MSIE [1-6]\.";
    }
    复制代码
  • 按着上面配置完成之后,重新打包提交到服务器,然后进行访问即可。这是打包之后访问的情况!

    image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改