jeecgboot入门（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部分最大




  




  




  ，而目前项目中用不到
  


  


  

，所以把它移除     
     
     
，减小包体积

移除步骤 package.json中删除依赖项

main.js删除引用部分

utils.js删除import部分和条件判断

删除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("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 src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script> <script 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

结果:

感觉没啥用

总结

速度优化最明显的方案就是开启Nginx压缩
  


  


  

，能让load时间从二十多秒直接降到八秒 能让体积显著减少的方案有删除在线开发表单的库     
     
     
，还有让moment.js只加载中文语言包 load时间挺玄学的 




   




   




  ，相同配置有时几次强刷都在三四秒附件

 



 



 

，有时几次都在七八秒

更新

官方文档gzip压缩程度设置为最高级别9               ，但查阅资料发现压缩比越高越消耗CPU的资源  




    




    




  ，随着压缩比的增大的确会降低传输的带宽成本














，不过发送数据前也会占用更多的CPU时间分片(说白了就是压缩比太高反而会消耗更多时间)

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