异步导入 json 文件反应 js 仍在进入捆绑包答案

【问题标题】：async import json file react js is still getting into the bundle异步导入 json 文件反应 js 仍在进入捆绑包
【发布时间】：2021-06-11 16:38:36
【问题描述】：

我有一个简单的问题，我正在开发一个 reactjs 应用程序，所以我有一个 json 静态文件，其中包含一些要在 HTML 组件上显示的国家/地区信息，我真正的问题是如何导入它而不影响我的捆绑，这是我现在导入的方式，它甚至无法正常工作

    import('assets/jsons/countries.json').then((countries) => {
      setCountries(Object.values(countries).reduce((acc, val) => ({ ...acc, [val.code2]: val }), {}));
    });

【问题讨论】：

请记住我将它导入到 useEffect 钩子中
如果你不想捆绑它，你必须把它ajax进去。

标签： reactjs web importerror

【解决方案1】：

假设您的组件文件旁边有一个data.json 文件：

 const getData=()=>{
    fetch('data.json'
    ,{
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(res => res.json())
      .then(data => data);
  }
  useEffect(() => {
    getData()
  },[])

【讨论】：