Question

我有一个使用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 = await import('...')进行异步导入。

无论如何，在构建过程中我是否可以使用webpack / gatsby生成此项目导入列表，该列表将在编译后的代码中提供？

Answer 1

您可以使用(None,32,24,24)代替require，这会在编译时延迟加载。

要求：编译时的延迟加载。
导入：运行时延迟加载。

来源：https://github.com/webpack/webpack/issues/6125#issuecomment-351642743

Webpack可以通过动态路径静态导入

1 个答案: