Jeecg Boot前端页面首次加载缓慢问题优化

一、JeecgBoot 低代码平台前端加载优化（适用于Vue2.x的版本）

1、vue.config.js中的配置项优化

　　　　1.1、修改configureWebpack配置，设置项目打包后的拆分数量，能够减少打包体积和页面加载时的访问数量（不可盲目设置得太小，合并会导致代码丢失）

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      // 按需加载时的最大并行请求数（用来设置项目打包之后，按需加载的包最终被拆分成n个包，maxAsyncRequests就是用来限制n的最大值）
      config.optimization.splitChunks.maxAsyncRequests = 30
      // 入口点上的最大并行请求数（用来设置入口点能被拆分的最大数量）
      config.optimization.splitChunks.maxInitialRequests = 20
    }
},

 　　　　1.2、修改chainWebpack配置

// 移除 prefetch 插件，prefetch插件会预先加载将来可能会用到的资源，在首屏加载时会浪费加载时间
config.plugins.delete('prefetch')

// 设置打包后js文件夹中的文件数量，减小打包体积（不可盲目设置过小，合并会导致代码丢失）
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
    maxChunks: 500, // 最大文件数量
    minChunkSize: 10000 // 最小文件体积，小于该值的文件将被合并
}])

// 多数项目没有国际化的需求，moment组件默认会加载所有语言的时间格式，这里改成只引入中文的，减少项目打包体积
config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])

　　2、main.js和package.json中删除不需要的组件（一定要根据自己功能需要来进行删除，这里的例子只是删除本项目不需要的组件，旨在提供一些优化思路）

　　　　2.1、删除引入Viser-vue组件，Viser-vue是封装好的一些Echarts图，如果开发时是自己单独引入Echarts进行开发，则可以删除

// main.js文件进行注释或删除，package.json中进行删除
// import Viser from 'viser-vue'

　　　　2.2、删除引入vue-print-nb-jeecg组件，该组件提供在线打印方面的功能，如果没有这方面的功能需要可以删除

// main.js文件进行注释或删除，package.json中进行删除
// import Print from 'vue-print-nb-jeecg'

 　　3、发布时修改Nginx配置文件

　　　　3.1、添加gzip压缩配置，提高浏览器对项目资源的访问速度

# 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功能

 

　　4、项目打包时监控资源占用大小，然后针对性的进行继续优化调整

　　　　4.1、修改package.json文件，在scripts节点下添加新的执行命令，打包时执行npm run build:report，打包完成之后会在dist文件夹中生成report.html文件,直接点击开打就可以看到项目中资源占用的整体情况

 

"scripts": {

    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",

    "serve": "vue-cli-service serve",

    "build:test": "vue-cli-service build --mode test",

    "build": "vue-cli-service build",

    "build:report": "vue-cli-service build --report",

    "lint": "vue-cli-service lint"

},