SOURCE

<div class="wrapper" id="app">
  <div class="d1" @click="func"></div>
</div>

<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>

<script>
  'use strict'
  let vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'd1',
        limit: 40,
        targetArr: [],
      }
    },
    methods: {
      func() {
        this.splitArr()
      },
      randNum(min, max) {
        if (arguments.length === 1) {
          min = 0
          max = arguments[0]
        }
        return Math.floor(Math.random() * (max - min + 1) + min)
      },
      splitArr() {
        console.time()
        
        let arr = [...Array(1e4).keys()].map(v => (v = this.randNum(1, 30)))
        arr.sort((a, b) => b - a)
        let half = this.limit / 2
        let target = this.targetArr
        
        for (let i = 0; i < arr.length; i++) {
          let cur = arr[i]
          if (cur > half) {
            let ars = [cur]
            ars.sum = cur
            target.push(ars)
          } else {
            this.pushToTarget(cur)
          }
        }
				console.log( this.targetArr )
        console.timeEnd()
      },

      pushToTarget(value) {
        let tArr = this.targetArr
        let len = tArr.length
        let limit = this.limit
        if (!len) {
          let arr = [value]
          arr.sum = value
          tArr.push(arr)
          return
        }
        for (let i = 0; i < len; i++) {
          let cArr = tArr[i]
          if (cArr.sum + value <= limit) {
            cArr.push(value)
            cArr.sum += value
            return false
          }
        }

        return true
      },
    },
  })
</script>

      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
        color: #27282b;
        background: #fff;
      }
      a {
        text-decoration: none;
        color: #27282b;
      }
      *,
      *::before,
      *::after {
        outline: none;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      .d1 {
        width: 50%;
        height: 100px;
        background: #eee;
        user-select: none;
        margin: 0 auto 50px auto;
      }