MineAdmin 前端打包后,访问速度慢原因及优化

前言:打包mineadmin-vue前端后,访问速度很慢,打开控制台,发现有一个index-xxx.js文件达7M+,加载时间太长;

优化:

一:使用文件压缩(gzip压缩)

1、安装compression-webpack-plugin插件

npm i compression-webpack-plugin --save

2、配置nginx,开启gzip

# nginx.conf 文件配置
http { 

    ...

   #开启和关闭gzip模式
    gzip on;
    #gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
    gzip_min_length 2k;
    # 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
    gzip_buffers 4 16k;
    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.0;
    # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
    gzip_comp_level 3;
    # 进行压缩的文件类型
    gzip_types text/plain application/javascript text/css application/xml;
    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;
    # 不对 IE6 及更低版本进行压缩
    gzip_disable "msie6";
}

# 前端 域名.conf 文件配置
service {
    listen 80;
    server_name www.xxx.com;
    
    ...

    # 开启 gzip_static
    gzip_static on;

}

3、重启nginx,重新打包

4、打开网页GZIP压缩检测 - 站长工具 测试前端域名

这一步大概能把7M文件压缩到2M左右,速度快了一些,但还是不够。

二、代码分割 (待续)

相关推荐

  1. 访问海外服务器速度原因

    2024-06-08 21:16:07       23 阅读
  2. 打包速度优化

    2024-06-08 21:16:07       44 阅读
  3. MYSQL查询优化,提升速度

    2024-06-08 21:16:07       40 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-08 21:16:07       5 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-08 21:16:07       5 阅读
  3. 在Django里面运行非项目文件

    2024-06-08 21:16:07       4 阅读
  4. Python语言-面向对象

    2024-06-08 21:16:07       7 阅读

热门阅读

  1. 前端常见的加密方式

    2024-06-08 21:16:07       13 阅读
  2. input输入框设置样式

    2024-06-08 21:16:07       14 阅读
  3. Ansible——fetch模块

    2024-06-08 21:16:07       17 阅读
  4. Mybatis06-动态SQL

    2024-06-08 21:16:07       13 阅读
  5. 微信小程序动画和Canvas笔记

    2024-06-08 21:16:07       20 阅读
  6. ES5/ES6 的继承除了写法以外还有什么区别?

    2024-06-08 21:16:07       15 阅读
  7. Jetpack compose中State和Kotlin Flow对比

    2024-06-08 21:16:07       17 阅读