Typescript 可以使用动态路径静态导入网页包吗

我有一个使用TypeScript、Webpack、React和Gatsby的项目，我想导入一大堆不同分辨率和webp版本的图像以提高性能

我已开始导入我的图像：

import Project1Screenshot640 from './images/projects/screenshots/640/project1.jpg'
import Project1Screenshot1280 from './images/projects/screenshots/1280/project1.jpg'
import Project1Screenshot1526 from './images/projects/screenshots/1526/project1.jpg'
import Project1Screenshot640Webp from './images/projects/screenshots/640/project1.webp'
import Project1Screenshot1280Webp from './images/projects/screenshots/1280/project1.webp'
import Project1Screenshot1526Webp from './images/projects/screenshots/1526/project1.webp'
// ... I've skipped the rest because it is a long list of imports.

const projects = {
  'project-1': {
    title: 'Project 1',
    screenshot: {
      640: [Project1Screenshot640, Project1Screenshot640Webp],
      1280: [Project1Screenshot1280, Project1Screenshot1280Webp],
      1526: [Project1Screenshot1526, Project1Screenshot1526Webp],
    },
  },
  // ...
}

但我意识到这是高度不可维护的，最好在编译时生成这些导入

下面这样会更好

const generateProject = (id, title) => {
  import Screenshot640 from `./images/projects/screenshots/640/${id}.jpg`
  // ...
  import Screenshot640Webp from `./images/projects/screenshots/640/${id}.webp`
  // ...

  return {
    title,
    screenshot: [
      640: [Screenshot640, Screenshot640Webp],
      // ...
    ],
  }
}

const projects = {
  'project-1': generateProject('project-1', 'Project 1')
}

但不幸的是，如果不使用

const Screenshot640=wait import（“…”）

异步执行，就无法使用动态路径（我知道）导入

---

---

如果有，我可以在构建期间使用webpack/gatsby生成此项目导入列表，该列表将在编译代码中可用。

您可以使用

require

而不是

import

，后者将在编译时延迟加载

• 要求：编译时延迟加载

• 导入：运行时延迟加载

资料来源：