前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案

1、compression-webpack-plugin插件打包.gz文件

  • 安装插件 也可以指定版本 我这里下载的是1.1.2版本的，试过更高的版本会有ES6语法的报错，因为我node使用的是v12，如果node版本更高可以尝试更高版本

  • ?
    1
    2
    3
    4
    5
    npm install --save-dev compression-webpack-plugin
    npm install --save-dev compression-webpack-plugin@1.1.2
    或者
     
    yarn add compression-webpack-plugin --save-dev

    解决 TypeError: Cannot read property ‘tapPromise‘ of undefined

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    在使用 compression-webpack-plugin 插件时报这个错误，原因是版本问题。
     
    ERROR TypeError: Cannot read property 'tapPromise' of undefined
    TypeError: Cannot read property 'tapPromise' of undefined
     
    安装插件的时候默认最新版本，但是可能脚手架还不支持这个版本，所以需要降低插件版本进行使用，这边在安装的时候最新版本为 v9.2.0，降到 v6.1.1 进行使用
     
     npm install compression-webpack-plugin@6.1.1

    　

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    vue.config.js配置插件
    module.exports = {
      chainWebpack: config => {
        const CompressionWebpackPlugin = require('compression-webpack-plugin')
        if (process.env.NODE_ENV === 'production') {
            config.plugin('CompressionPlugin').use(
                new CompressionWebpackPlugin({
                test: /\.(js|css)$/,
                threshold: 10240, // 超过10kb的文件就压缩
                    deleteOriginalAssets:fale, // 删除压缩后的源文件
                    minRatio: 0.8
              })
            )
        }
      }
    }

    2、nginx配置：

  • 　　

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    完整示例
    server {
        listen 80;
        # gzip config
        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_disable "MSIE [1-6]\.";
     
        root /usr/share/nginx/html;
     
        location / {
            # 用于配合 browserHistory 使用
            try_files $uri $uri/ /index.html;
     
            # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
            # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;
     
        }
        location /api {
            proxy_pass https://preview.pro.loacg.com;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   Host              $http_host;
            proxy_set_header   X-Real-IP         $remote_addr;
        }}server {
      # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
      listen 443 ssl http2 default_server;
     
      # 证书的公私钥
      ssl_certificate /path/to/public.crt;
      ssl_certificate_key /path/to/private.key;
     
      location / {
            # 用于配合 browserHistory 使用
            try_files $uri $uri/ /index.html;
     
      }
      location /api {
          proxy_pass https://preview.pro.loacg.com;
          proxy_set_header   X-Forwarded-Proto $scheme;
          proxy_set_header   Host              $http_host;
          proxy_set_header   X-Real-IP         $remote_addr;
      }}
    # gzip config 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_disable "MSIE [1-6]\.";

    附录

    配置项释义：

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    # 开启服务器实时gzip
      gzip on;
       
      # 开启静态gz文件返回
      gzip_static on;
       
      # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
      gzip_min_length 1k;
       
      # 设置压缩所需要的缓冲区大小    
      gzip_buffers 32 4k;
     
    # 设置gzip压缩针对的HTTP协议版本
      gzip_http_version 1.0;
     
      # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
      gzip_comp_level 7;
     
      # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
      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 application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
     
      # 是否在http header中添加Vary: Accept-Encoding，建议开启
      gzip_vary on;
     
      # 禁用IE 6 gzip
      gzip_disable "MSIE [1-6]\.";　

    　实际成功实例

  • vue.config.js

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
      chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        const CompressionWebpackPlugin = require('compression-webpack-plugin')
        svgRule.uses.clear()
        svgRule
          .test(/\.svg$/)
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
     
          if (process.env.NODE_ENV === 'production') {
              config.plugin('CompressionPlugin').use(
                  new CompressionWebpackPlugin({
                      test: /\.(js|css)$/,
                      threshold: 10240, // 超过10kb的文件就压缩
                      deleteOriginalAssets:false, // 删除压缩后的源文件
                      minRatio: 0.8
                  })
              )
          }
     
      },
      productionSourceMap: false,
      devServer: {
        open: true,
        port: 8001,
        overlay: {
          errors: true,
          warnings: true
        }
      },

    　打包后的文件

  •  

    nginx.conf 

  • ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    #gzip  on;
     
    server {
        listen       80;
        server_name  localhost;
        #开启gzip
        gzip  on; 
        #低于1kb的资源不压缩
        gzip_min_length 1k;
        #压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
        gzip_comp_level 5;
        #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css; 
        #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
        gzip_disable "MSIE [1-6]\."; 
        #是否添加“Vary: Accept-Encoding”响应头
        gzip_vary on;      
     
        #charset koi8-r;
     
        #access_log  logs/host.access.log  main;
     
        location / {
            root   /home/vue/dist;
            index  index.html index.htm;
        }
     
        #error_page  404              /404.html;
     
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
     
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
     
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
     
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    　重启nginx

  • ./nginx -s reload　 

  • 以下资料还没试过，有需要可以试试

  • 　

    通过以上处理，在网页访问时，chunk-vendors.js 显示为2.3M，加载还是需要2秒左右，还是不太能接受。

    于是需要进一步查询项目还有哪些无用的大文件依赖，于是通过以下方法来定位大依赖：
    通过 webpack-bundle-analyzer 插件来分析依赖，该插件可以很清晰的看清楚 chunk-vendors.js 中包含了哪些依赖和哪些依赖是很大的，然后进一步分析这些依赖是否真的必要，如果没有必要就直接拿掉，最终，拿掉了三个1M多的依赖，直接让 chunk-vendors.js 从7.7M下降到了3.1M，gz压缩后只有900多kb，加载大概在700毫秒左右。

    具体操作如下：
    1 引入 webpack-bundle-analyzer 插件

    1
    		 
    npm install --save-dev webpack-bundle-analyzer

     

    2 修改 vue.config.js，相应位置加入以下代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    module.exports = {
      configureWebpack: config => {
        return {
          plugins: [
            new BundleAnalyzerPlugin()
          ]
        }
      }
    }

     

    　　

posted @   zhangzhiping35  阅读(1423)  评论(0)  编辑  收藏  举报
相关博文：
·  Linux安装nginx部署vue项目
·  nginx开启Gzip压缩
·  vue页面加载慢，chunk-vendors.js文件太大
·  vue项目优化——vue 处理打包后加载慢的问题
·  记录优化vue项目首屏加载慢的过程
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手