当被迫需要在前端存储大量数据,我选择了这样做

大量数据不需要入库,需要前端存储的数据量很大,听起来似乎很不合理,但是在实际项目中就遇见了,这些数据放在文件夹里边也就20MB,没错你没听错就是20MB!

一开始想着放就放吧,没考虑那么多,只到事故发生..... 首页加载进去要3-4min,这样的网页如果是ToC端产品我可能早被开了吧(还好我们不是),这些文件一开始是放到项目中.js文件中的,也不以为然,然而事情开始更严重起来.... 项目是使用vite打包工具, 打包出来的.js文件臃肿的超出想象,有个文件格外的大

数据是通过import方式引入进来的,如果是没加载到应该不会执行 还特意复习了下import和require的知识 图片看起来好像确实是异步的,然后就一直绕啊绕... 项目还有一个特点就是在本地跑的很快,不会卡那么长时间,所以一直想着是部署的服务器的问题,就是责任外延嘛,毕竟现场服务器也真的很垃圾...(心里边还一直想本该数据放后端)
有时候过度的责任外延,确实会影响自己成长。
随后我想着解决把数据放到public里边能不能解决打包后js文件过大导致加载时候文件下载时间长的问题呢

然鹅直接程序飘红了,这这... 大概意思就是vite不支持在js代码的格式引入,它支持的是

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    // 添加以下配置
    build: {
        rollupOptions: {
            input: {
                main: './index.html',
                data: '/path/to/your/data.js' // 指定入口点
            }
        }
    }
});

最后的解决方案是使用JSON文件加fetch的方式实现的.

把静态数据通过JSON格式放到public静态目录下

在用到数据地方通过fetch去取:

 await fetch(dataUrl)
      .then(res => {
          if (!res.ok) {
              throw new Error('Network response was not ok ' + res.statusText);
          }
          return res.json(); // 解析 JSON 数据
      })
      .then(data => {
          console.log(data,'----------------data')

          tmpData = data; // 将解析后的数据存储到变量中
      })
      .catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
      });

具体的实现方式,

这样就可以避免打包出来的js文件体积过大.

可能是由于我太菜了,一直想着vite配置好之后打包会自动分包.

不理解打包出来的.js文件为何会这么大?

Vite打包时候遇见import到底做了什么呢?

import 是一种静态导入机制，它在编译时解析，而不是在运行时。

这意味着：在构建过程中，模块依赖关系会被分析和处理。

所有的 import 语句会在代码打包时一起处理，最终生成一个包含所有依赖项的构建文件。

Fetch API方式把文件放进静态文件夹public里边 VS 数据放到项目内使用import引入

前者在vite打包构建时候并未把data数据直接引入分析,只有在触发请求函数时候才去取数据,后者在构建时候就会把data数据放进构建文件中,导致打包文件很臃肿.

最后,虽然优化了首屏加载很慢的问题,但是这种方式并不友好,每次在fetch请求时从前端服务器public文件夹中去取整个文件才能做前端逻辑处理.文件过大,还是会导致每次操作都受阻.再有这么大量的数据还是别让前端处理了,直接建议存在后端,再让前端处理就说产品买的服务器性能不行!

快来关注我公众号, 一起成长呀~~

~欢迎大家来访~~~!