jeecg-boot首页加载速度/打包优化全过程：

Sun Peng

已于 2023-07-03 09:38:51 修改

阅读量3.4k

点赞数 5

分类专栏： Vue框架文章标签：服务器 jeecg-boot 首页加载速度 vue

于 2022-11-23 11:28:11 首次发布

原文链接：http://t.csdn.cn/hmCgz

版权

Vue框架专栏收录该内容

140 篇文章 9 订阅

订阅专栏

文章目录

一、优化结果

前端和后端部署在轻量服务器:
在这里插入图片描述

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

优化前:

在这里插入图片描述

优化后:

在这里插入图片描述

二、优化方案

1、开启Nginx压缩

方案来自于:jeecg官方文档:http://doc.jeecg.com/2043891
作用:通过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功能

在这里插入图片描述

效果显著:

在这里插入图片描述

2、移除不需要的库

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

main.js删除引用部分

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

删除node_modules，重新yarn install再yarn run build打包antd-online-mini不在了，体积从11.14MB降到9.67MB

【2】结果:
需要加载的资源从9.4MB降到7.8MB，加载时间也减少了1~2秒
在这里插入图片描述

3、Icon图标库按需加载

JeecgBoot实战 - 按需加载方案
 按需加载

相关文件项目也已经配置好了👇
在这里插入图片描述

【1】需要修改vue.config.js:
新增.set('@ant-design/icons/lib/dist$',resolve("src/icons.js"))
在这里插入图片描述
体积从9.67MB降到9.2MB

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

4、移除prefetch

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

Prefetch

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

在vue.config.js加上config.plugins.delete('prefetch')
在这里插入图片描述

结果:

有点改善
在这里插入图片描述

5、打包移除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项目都已经配置好了
在这里插入图片描述

6、合并打包

解决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时间也缩短了一点，不过资源大了

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

webpack 按需加载momentjs 语言包

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

修改vue.config.js

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

在这里插入图片描述
之前打包的里面有各种语言包:

现在:

结果:
感觉效果不明显

8、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",

在这里插入图片描述
结果:
包的体积减小了，但加载时间并没有明显减小

9、组件库（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,结果如下:
在这里插入图片描述

五、vue.config.js

const path = require('path')
const webpack = require('webpack')
const CompressionPlugin = require("compression-webpack-plugin")

function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

  //qiankuan打包时放开
  // outputDir: "../dist/main",
  // 多入口配置
  // pages: {
  //   index: {
  //     entry: 'src/main.js',
  //     template: 'public/index.html',
  //     filename: 'index.html',
  //   }
  // },

  // 打包app时放开该配置
  publicPath: process.env.VUE_APP_PUBLICPATH,
  lintOnSave: false,
  // 开发服务器配置
  devServer: {
    inline: true,//设置代码保存时是否自动刷新页面
    hot: true,//设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
    open: false,//设置 server 启动后是否自动打开浏览器
    compress: true,//压缩静态文件
    overlay: {//当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。
      warnings: true,
      errors: true,
    },
    headers: {//在所有响应中添加首部内容
      'Access-Control-Allow-Origin': '*',
    },
    port: process.env.VUE_APP_PORT,
    // proxy: {
    //   [process.env.VUE_APP_API_BASE_URL + '/api']: {
    //     target: 'http://192.168.8.237:8002',
    //     changeOrigin: true,
    //     ws: true,
    //     secure: false,
    //     pathRewrite: {
    //       [process.env.VUE_APP_API_BASE_URL + '/api']: '' //默认所有请求都加了jeecg-boot前缀，需要去掉
    //     }
    //   },
    //   [process.env.VUE_APP_API_BASE_URL]: {
    //     target: process.env.VUE_APP_API_BASE_URL_TARGET,//科达测试
    //     ws: true,
    //     changeOrigin: true,//是否跨域
    //     secure: true,// 如果是https接口，需要配置这个参数
    //   },
    // }
  },
  configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV == 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  },
  chainWebpack: (config) => {
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete('preload');
    //只保留中文语言包
    config.plugin('ContextReplacementPlugin').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/])

    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@/api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@/assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@/views', resolve('src/views'))

    //生产环境，开启js\css压缩
    if (process.env.NODE_ENV == 'production') {
      // 分割代码
      config.optimization.splitChunks({ chunks: 'all' })
      config.optimization.runtimeChunk('single')
      // 压缩代码
      config.optimization.minimize(true);

      // 开启gzip压缩
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css|less|scss)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        // threshold: 5120, // 对超过5k的数据进行压缩
        minRatio: 0.8,
        cache: true, // 是否需要缓存
        deleteOriginalAssets: false  // true删除源文件(不建议);false不删除源文件
      }))

      config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
        maxChunks: 5,
        minChunkSize: 10000
      }])
    }

    // 配置 webpack 识别 markdown 为普通的文件
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use()
      .loader('file-loader')
      .end()

    // 编译vxe-table包里的es6代码，解决IE11兼容问题
    config.module
      .rule('vxe')
      .test(/\.js$/)
      .include
      .add(resolve('node_modules/vxe-table'))
      .add(resolve('node_modules/vxe-table-plugin-antd'))
      .end()
      .use()
      .loader('babel-loader')
      .end()

    // 开启图片压缩  npm i image-webpack-loader --save-dev
    if (process.env.NODE_ENV == 'production') {
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          disable: true,
          quality: '65-80',
          speed: 4
        })
        .end()
    }
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  },
}