jeecg-boot首页加载速度优化全过程

优化结果

前端和后端部署在轻量服务器:

以下结果都是三次强刷得到的

优化前:



优化后:

优化方案

开启Nginx压缩

方案来自于:jeecg官方文档

作用:通过nginx内置的压缩策略来压缩静态资源，提升资源请求速度

在nginx.conf 的 http 中加入以下片断:

    # gzip config    gzip on;#开启压缩    gzip_min_length 1k;#低于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;#对哪些mine资源开启Gzip压缩功能    gzip_vary on;#是否在响应报文首部插入“Vary: Accept-Encoding”    gzip_disable "MSIE [1-6]\.";#针对不同种类客户端发起的请求，选择性地关闭Gzip功能，这里意思是禁用IE6 gzip功能

效果显著:

移除不需要的库

ant-design-vue-jeecg关于首页加载过慢的优化小结

目的:减小体积，加快加载速度

打包前先在build后面加 --report

打包后会在dist文件夹生成report.html

打开可以看见包的大小，其中antd-online-mini部分最大，而目前项目中用不到，所以把它移除，减小包体积

移除步骤

1. package.json中删除依赖项
   
2. main.js删除引用部分
   
3. utils.js删除import部分和条件判断
   
   
4. 删除node_modules，重新yarn install再yarn run build打包
   antd-online-mini不在了，体积从11.14MB降到9.67MB
   
   
   结果:
   需要加载的资源从9.4MB降到7.8MB，加载时间也减少了1~2秒
   
   
   

Icon图标库按需加载

JeecgBoot实战 - 按需加载方案

按需加载

相关文件项目也已经配置好了👇

需要修改vue.config.js:

新增.set('@ant-design/icons/lib/dist$',resolve("class="lazy" data-src/icons.js"))

体积从9.67MB降到9.2MB

需要加载的资源从7.8MB降到7.3MB,load时间没大变化:

移除prefetch

解决webpack打包后chunk.js 数量过多，影响加载速度问题（Jeecg）

Prefetch

作用: prefetch是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。移除 prefetch避免加载多余的资源

在vue.config.js加上config.plugins.delete('prefetch')

结果:
有点改善

打包移除sourceMap，生产环境取消console.log,开启js/css压缩

作用: 精简文件

• 移除sourceMap:SourceMap用来作为源代码和编译代码之间的映射，方便开发定位问题,一般在压缩 js 的过程中，会生成相应的 sourcemap 文件，并且在压缩的 js 文件末尾追加 sourcemap 文件的链接 ，如：//#sourceMappingURL=xxxx.js.map。这样，浏览器在加载这个压缩 过的js 时，就知道还有一个相应的 sourcemap 文件，也会一起加载下来，运行的过程中如果 js 报错，也会给出相应源代码的行号与列号，而非压缩文件的
• 生产环境取消console.log:没啥好解释的，字面意思
• 开启js/css压缩:JS和CSS经过压缩之后体积变小，即文件占用内存变小。在访问网站的时候要加载JS和CSS，体积越小，加载越快。网站打开的速度也就越快，有利于用户体验

jeecg-boot项目都已经配置好了

合并打包

解决webpack打包后chunk.js 数量过多，影响加载速度问题(Jeecg)

LimitChunkCountPlugin

作用: 解决打包后chunk.js文件过多问题

编写代码时，可能已经添加了许多代码拆分点，以便按需加载内容。在编译之后，可能会注意到一些块太小，从而造成更大的HTTP开销。用LimitChunkCountPlugin合并块对块进行后期处理

//vue.config.js添加以下内容const webpack = require('webpack')// 限制打包的个数(减少打包生成的js文件和css文件)//在合并chunk时，webpack会尝试识别出具有重复模块的chunk，并优先进行合并。任何模块都不会被合并到entry chunk中，以免影响初始页面加载时间//maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。//minChunkSize: 设置 chunk 的最小大小。minChunkSize: 设置 chunk 的最小大小。config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{        maxChunks: 5,         minChunkSize: 10000}])

体积从9.2MB降到7.51MB

结果:
请求数量从330降到17，load时间也缩短了一点，不过资源大了

Moment库语言配置文件按需加载

webpack 按需加载momentjs 语言包

作用: momentjs因为包括很多语言包，所以体积较大，现在只保留中文语言包，减少体积

修改vue.config.js

//只保留中文语言包config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])

之前打包的里面有各种语言包:

现在:

结果:
感觉效果不明显

CDN加速

作用:CDN是在现有Internet基础上增加一层新的网络架构，通过部署边缘服务器，采用负载均衡、内容分发、调度等功能，使用户可以就近访问获取所需内容，从而解决网站拥塞情况，提高用户访问响应速度

大部分第三方库都是按需加载，我只把比较好分出来的库用cdn加速了，可能我这步做得不好

//修改vue.config.js     config.set('externals', {        vue: 'Vue',        axios: 'axios',        'tinymce': 'tinymce'      })

  //修改index.html  <script class="lazy" data-src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>  <script class="lazy" data-src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script>  <script class="lazy" data-src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>  <script class="lazy" data-src="https://cdn.staticfile.org/tinymce/5.4.1/tinymce.min.js"></script>

//packge.json删去以下依赖"tinymce": "5.4.1","axios": "^0.18.0",

结果:
包的体积减小了，但加载时间并没有明显减小

组件库（Antd）按需加载

JeecgBoot实战 - 按需加载方案

作用:按需加载可以减少网络请求,提高页面的响应速度

项目已经配置了文件👇:

需要做的就是改动main.js和babel.config.js,packge.json部分

main.js: 注释import Antd...及Vue.use(Antd)，加上import './components/lazy_antd'

babel.config.js: 加上⬇

plugins: [    [ "import", {      "libraryName": "ant-design-vue",      "libraryDirectory": "es",      "style": "css"    } ]  ]

package.json: 引入依赖babel-plugin-import

"babel-plugin-import": "^1.13.0",

本地运行的时候可以看到:

体积小了0.03MB

结果:
感觉没啥用

总结

1. 速度优化最明显的方案就是开启Nginx压缩，能让load时间从二十多秒直接降到八秒
2. 能让体积显著减少的方案有删除在线开发表单的库，还有让moment.js只加载中文语言包
3. load时间挺玄学的，相同配置有时几次强刷都在三四秒附件，有时几次都在七八秒

更新

1. 官方文档gzip压缩程度设置为最高级别9，但查阅资料发现压缩比越高越消耗CPU的资源，随着压缩比的增大的确会降低传输的带宽成本，不过发送数据前也会占用更多的CPU时间分片(说白了就是压缩比太高反而会消耗更多时间)

将9调整为6,结果如下:

来源地址：https://blog.csdn.net/weixin_54218079/article/details/127366372