Reactjs 异步导入json文件react js仍在捆绑包中

我有一个简短的问题，我正在开发一个reactjs应用程序，所以我有一个json静态文件，其中包含一些国家/地区的信息，将显示在HTML组件上，我真正的问题是如何导入它而不将其重量放入包中，这就是我现在导入的方式，甚至不起作用

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

---

假设组件文件旁边有一个

data.json

文件：

 const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])

---

请记住，我正在将其导入useEffect应用程序中。如果您不想将其捆绑，则必须将其加入ajax。