当前位置:首页 > 技术分享 > 正文内容

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

admin3年前 (2022-07-25)技术分享6464

这个优化是两方面的,前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件。

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

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

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

或者

yarn add compression-webpack-plugin --save-dev
  • vue.config.js配置插件 如果报为没有webpack就执行npm link webpack

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:true, // 不删除源文件
      			minRatio: 0.8
          })
        )
   	}
  }
}

2、nginx配置:

  • gzip config

    # 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]\.";
  • 完整示例

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
  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]\.";

3、示例

  • 打包文件大小信息

 DONE  Compiled successfully in 43951ms                                                                                                                                                                                                                            11:19:06 PM

  File                                    Size              Gzipped

  dist\js\chunk-vendors.6f36ee27.js       2729.43 KiB       829.53 KiB
  dist\js\chunk-42ac50f8.3aed1f5b.js      260.22 KiB        62.60 KiB
  dist\js\app.47d6af3d.js                 89.26 KiB         27.35 KiB
  dist\js\chunk-2f07b9a4.4a3fdd01.js      62.59 KiB         14.08 KiB
  dist\js\chunk-3cfde34a.24cec922.js      24.67 KiB         7.74 KiB
  dist\js\chunk-1d171181.fe12f22a.js      24.63 KiB         6.18 KiB
  dist\js\user.d8960780.js                18.66 KiB         6.47 KiB
  dist\js\chunk-05182e90.d2ed6c5c.js      16.77 KiB         5.63 KiB
  dist\js\chunk-3dd96f82.41706c18.js      13.98 KiB         4.04 KiB
  dist\js\chunk-3085d777.f0a8defc.js      9.91 KiB          2.88 KiB
  dist\js\chunk-4d8431e9.3b47471d.js      8.94 KiB          3.25 KiB
  dist\js\chunk-4492074c.9f53a6c6.js      8.37 KiB          3.14 KiB
  dist\js\chunk-761f0cf1.de4d849b.js      8.15 KiB          2.69 KiB
  dist\js\chunk-605ac6e0.cb0a2add.js      7.79 KiB          2.28 KiB
  • 打包后的文件


  • Chrome访问



转自:https://www.jianshu.com/p/957ed8a7ca73

扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/330.html

分享给朋友:

相关文章

节假日api 开源版 解密

介绍免费节假日API 开源了,可以离线调用, 可以集成到自己系统中开源地址https://gitee.com/web/holidays_api开源说明注:原百度节假日API即为本人提供,后百度apistore禁止个人开发者所以才有此独立接口...

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

Nginx服务崩溃自动重启脚本(监控进程服务并自动重启进程服务)脚本

有一台服务器运行着Ngin最近突然有一次崩溃,导致使用方当天无法访问网页端,然后我不得不登录服务器,检查各项服务,发现nginx崩溃了,于是重启Nginx,问题解决。后来为了防止Nginx再发生这种情况给运维带来的运维成本,于是写了一个脚本...

在CentOS 5.x 6.x里使用yum源 换阿里云国内源换vault.centos.org源

阿里云CentOS 5 的系统,无法用yum来安装应用软件。  原因:CentOS 5 在2017-03-31日已经结束支持,不再提供维护更新,所以包括阿里云镜像站的文件可能都是过时或已经有部分文件缺失。 &n...

百度云网盘高速下载方法[测试可用]

百度云网盘高速下载方法[测试可用]

大前提这是一个油猴脚本,安装脚本之前,必须先安装油猴浏览器扩展(如已安装则跳过):【第一步】下载油猴 --> 如有提示安装,则直接安装即可,否则继续执行第二步【第二步】安装油猴 --> 参考其中章节:&nbs...

Linux/centos inode 占用100%的解决办法

当你的 Linux 系统无法创建新文件时,有可能是你的磁盘满了,还有可能是你的磁盘的 inode 用光了,我们今天要说的就是后一种情况,要解决这个问题,只能是删除一些文件,但是一般情况下,其实是你的系统中的某个地方产生了大量的你并不需要的文...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。