Vue.js加载展示100MB大JSON文件遇报错，寻求解决方案

问题背景 #

需要在Vue.js项目中展示约100MB的大JSON文件数据到指定结构的表格，要求不将整个文件存入内存数据结构。尝试使用JSONStream时执行npm run serve出现如下报错：

JSONStream in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/components/ContentBody.vue?vue&type=script&lang=js

已执行npm install JSONStream但问题未解决，需解决兼容问题或提供替代方案。

报错解决：JSONStream与Vue.js兼容配置 #

JSONStream本身是Node.js端的流处理工具，直接在前端组件中引入会因为浏览器环境缺少Node.js的stream相关API报错，需做以下配置：

• 安装浏览器端流模拟依赖：

  npm install stream-browserify browserify-zlib buffer util process --save-dev
  

• 在Vue CLI项目的vue.config.js中添加webpack配置：

  const { defineConfig } = require('@vue/cli-service')
  const webpack = require('webpack')
  
  module.exports = defineConfig({
    configureWebpack: {
      resolve: {
        fallback: {
          stream: require.resolve('stream-browserify'),
          zlib: require.resolve('browserify-zlib'),
          buffer: require.resolve('buffer/'),
          util: require.resolve('util/'),
          process: require.resolve('process/browser')
        }
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser'
        })
      ]
    }
  })
  

• 重新执行npm run serve，即可在组件中正常引入并使用JSONStream。

前端原生流式处理替代方案（无需Node.js依赖） #

如果不想配置webpack，可使用浏览器原生API结合轻量JSON解析库实现：

方案1：Fetch API + 手动分割JSON片段（适用于JSON Lines格式） #

假设大JSON是每行一个对象的JSON Lines格式，代码示例：

<template>
  <div class="s-table-container">
    <table class="s-table">
      <thead>
        <tr>
          <th>DataName1</th>
          <th>DataName2</th>
          <th>DataName3</th>
          <th>DataName4</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.DataName1 }}</td>
          <td>{{ item.DataName2 }}</td>
          <td>{{ item.DataName3 }}</td>
          <td>{{ item.DataName4 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  async mounted() {
    const response = await fetch('/static/large-data.json')
    const reader = response.body.getReader()
    const decoder = new TextDecoder('utf-8')
    let partialContent = ''

    const processChunk = (chunk) => {
      partialContent += decoder.decode(chunk, { stream: true })
      // 按行分割处理
      const lines = partialContent.split('\n').filter(line => line.trim())
      partialContent = lines.pop() || ''
      
      lines.forEach(line => {
        // 清理数组格式的首尾符号
        const cleanLine = line.replace(/^\[|,$|]$/g, '')
        if (cleanLine) {
          const rowData = JSON.parse(cleanLine)
          this.tableData.push(rowData)
        }
      })
    }

    // 循环读取流数据
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      processChunk(value)
    }
    // 处理最后剩余的片段
    if (partialContent) processChunk(new Uint8Array())
  }
}
</script>

方案2：使用jsonparse库流式解析任意JSON结构 #

安装依赖：

npm install jsonparse --save

组件内实现代码：

<script>
import Parser from 'jsonparse'

export default {
  data() {
    return {
      tableData: []
    }
  },
  async mounted() {
    const response = await fetch('/static/large-data.json')
    const reader = response.body.getReader()
    const decoder = new TextDecoder('utf-8')
    const parser = new Parser()

    // 监听JSON节点解析事件
    parser.onValue = (value) => {
      // 假设顶层是数组，数组元素即为表格行数据
      if (parser.stack.length === 2) {
        this.tableData.push(value)
      }
    }

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      const chunk = decoder.decode(value, { stream: true })
      parser.write(chunk)
    }
    parser.end()
  }
}
</script>

表格性能优化建议 #

由于数据量极大，直接渲染全部DOM会导致页面卡顿，建议：

• 使用虚拟滚动：引入vue-virtual-scroller组件，仅渲染可视区域内的表格行，减少DOM节点数量：

  npm install vue-virtual-scroller --save
  

• 分页加载：若业务允许，可将大JSON分割为多个小文件，实现分页请求加载。

内容的提问来源于stack exchange，提问作者Mass Mak