标签: dynamic-import

我曾经这样加载 json 文件：

import faq from './faq.json'

interface FAQ {
   title: string
   body: string
}

interface SiteConfig {
    title: string
    faqs: FAQ[]
}

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: faq
    }
}

现在我想使用动态导入：

interface FAQ {
   title: string
   body: string
}

interface SiteConfig {
    title: string
    faqs: () => FAQ[]
}

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: (): Promise<FAQ[]> => import('./faq.json')
    }
}

失败并显示：

Type 'Promise<typeof "*.json">' is not assignable …

我正在研究 webpack 中基于承诺的动态导入：

import('chunk').then(chunk => {...do something with chunk...})。

在这种情况下，webpack 有办法消除死代码吗？似乎整个 esModule 都是默认导入的，而没有提前指定您需要什么。

更新

澄清一下，当您只需要模块“A.js”中的函数“f”时，您可以像这样动态导入它：

import('A.js').then(({f}) => {...})

这是以下的动态模拟：

import {f} from 'A.js'

然而，据我所知，webpack 无法通过在动态版本中修剪“A.js”中不需要的函数来优化捆绑包，即使我只解构并使用其中之一，我总是会得到整个模块可能的出口。

这只是 webpack 对动态加载模块的死代码检测的限制吗？

我使用动态导入来创建项目中所有语言环境的块。块已创建，但客户端在运行时报告此错误：

Uncaught (in promise) ReferenceError: locale is not defined
  at _callee$ (main.js?f161:72)
  at tryCatch (runtime.js?98b8:62)
  at Generator.invoke [as _invoke] (runtime.js?98b8:288)
  at Generator.prototype.(:8082/d2/v2/search/anonymous function) [as next] (webpack-internal:///./node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:114:21)
  at asyncGeneratorStep (asyncToGenerator.js?c973:3)
  at _next (asyncToGenerator.js?c973:25)

有问题的代码：

Uncaught (in promise) ReferenceError: locale is not defined
  at _callee$ (main.js?f161:72)
  at tryCatch (runtime.js?98b8:62)
  at Generator.invoke [as _invoke] (runtime.js?98b8:288)
  at Generator.prototype.(:8082/d2/v2/search/anonymous function) [as next] (webpack-internal:///./node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:114:21)
  at asyncGeneratorStep (asyncToGenerator.js?c973:3)
  at _next (asyncToGenerator.js?c973:25)

巴贝尔配置：

"babel": {
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ], …

我需要一些机制来在浏览器中重新加载动态导入的 JS 文件（使用import()）。当我使用简单的<script src='index.js'>装载此任务可以分解这种方式：<script src='index.js?v=1.4.2'>。如何使用与动态导入类似的东西？是否有某种方法可以将哈希添加到由 Webpack 文件的名称生成的？

我正在尝试部署我的reactjs应用程序，该应用程序使用@babel/plugin-syntax-dynamic-import，该应用程序在我的本地主机上运行良好，但是当我将其部署在netlify上时，只有根url有效（例如：mysite.netlify）。 com），所有其他带有 slug 的 url（例如：mysite.netlify.com/Visit）都不起作用，它只是返回 404 页面未找到，即使我已经定义了路由并在本地主机上工作。

我的 .babelrc 文件中有以下设置

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
} 

在我的 package.json 中

"dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    ...
}

我的 App.js 上有以下导入

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Photography = lazy(() => import('../Form1/Main.js'));
const Visit = lazy(() => import('../Form2/Main.js'));

有什么遗漏或者我需要让它在 netlify 上工作吗？

我需要在客户端动态加载dayjs区域设置。在服务器上，我可以只需要它并且它可以工作，但它总是会导致水合作用不匹配，因为客户端上没有办法等到

import(`dayjs/locale/${locale}.js`)

实际上完成了。我可以以某种方式告诉 next 在开始在客户端上重新水化之前等待导入（因为服务器渲染的 html 实际上是正确的并且使用正确的区域设置渲染）？

这是我的第一个问题，我编码才一年，所以请耐心等待。我在网站上寻找类似的问题，但找不到任何对我有用的东西。

我创建了一个 Icon 组件，在其中动态导入请求的 SVG。我第一次使用这个运行良好的解决方案，但是当我尝试使用反应测试库和快照测试这个组件时，我意识到快照始终是在未导入任何内容时返回的跨度。我首先认为它与 useRef() 的使用有关，因为我看到人们说 refs 不适用于 Jest，所以我将 Icon 组件更改为：

const Icon: FC<IconProps> = ({ type, onClick, tooltip, className }: IconProps) => {

  const [IconProps, setIconProps] = useState({
    className: className || 'icon'
  });
  const tooltipDelay: [number, number] = [800, 0];
  useEffect(() => {
    setIconProps({ ...IconProps, className: className || 'icon' });
  }, [className]);

  const SVG = require(`../../svg/${type}.svg`).default;
  const spanClassName = "svg-icon-wrapper";
  if (typeof SVG !== 'undefined') {
    if (tooltip) {
      return (
        (<Tooltip title={tooltip.title} delay={tooltip.delay ? tooltipDelay …

我想动态导入组件而不导入特定组件。我想使用从商店收到的变量设置组件名称：

<script lang="ts">
    // SVELTE
    import { onMount } from 'svelte';

    // STORE
    import { dynamicComponent } from '$stores/dynamicTitle';


    $: $dynamicComponent;
    console.log($dynamicComponent)

    
    let renderDynamicComponent
    

    onMount(async () => {       
        const importValue = (await import(`../../lib/components/Home/DynamicComponents/${String($dynamicComponent)}.svelte`)).default;
        // const importValue = (await import(`../../lib/components/Home/DynamicComponents/IntroSectionCustom.svelte`)).default;
        renderDynamicComponent = importValue
    });

<svelte:component this={renderDynamicComponent}/>

但我得到：

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/lib/components/Home/DynamicComponents/Intro-Section-Custom.svelte

我不明白。从错误来看，这似乎是正确的路径......

我正在使用unplugin-icon创建一个图标组件，通常情况下我可以导入

//script
import IconCopy from '~icons/prime/copy'
//template
<IconCopy/>

它可以工作，但是如果我们想使用另一个图标，那么逐个导入感觉不方便，所以我创建了一个名为 Eunoicon.vue 的动态组件

<script setup>
const props = defineProps({
    icon : {type:String}
})
const from = `~icons/prime/${props.icon}`
const TheIcon = await import(/* @vite-ignore */from)
console.log('ti',TheIcon)
</script>
<template>
<TheIcon/>  
</template>

但是当我尝试将其导入到组件时，它会抛出错误Uncaught (in promise) TypeError: Failed to resolve module specifier '~icons/prime/copy'. 对于这种方法或任何提供简单方法的图标库有什么建议吗？我已经尝试过 vue font Awesome 但它仍然没有我想要的那么简单。

我有一个React+vite应用程序，我正在为其编写测试以涵盖应用程序启动时的前端路由重定向逻辑。

路由由 v6 处理react-router，所有与路由相关的组件都包装在React.lazy. 测试是由运行的vitest，我正在使用react-testing-library助手

所有测试都是相似的，看起来像这样

it('Redirects from app root to red room if the user has a red shirt', async () => {
    getUser.mockReturnValue(redShirtUser);
    render(MyTestedComponent, { wrapper });

    await waitFor(() => expect(screen.getByText('Welcome to the red room'));
    expect(history.location.pathname).toBe('/red-room');
  });

然而，其中一项测试花费的时间比其他测试要长得多，甚至waitFor超时。我可以指定更长的超时waitFor，但它仍然无法在 CI 上可靠地运行。如果测试是其文件中唯一的测试/唯一正在执行的测试，也会发生这种情况。

我已经将缓慢的部分（通过调试的魔力console.log）缩小为惰性import()语句 - 导入并执行模块需要花费很多时间（秒）。

我该如何调试这个？是否有已知的因素会导致（惰性）导入变慢？