问题标签 [dynamic-import]

我在实现动态导入时遇到了麻烦（我可能只是对这个概念缺乏理解）。

我有一个vue.js用. 所有框架都是最新的稳定版本。我希望这个应用程序支持插件组件。该插件在应用程序配置中定义，然后通过动态导入加载并可以在某处显示。typescriptwebpack

我在 Webpack config 中设置了两个单独的配置，一个用于应用程序，另一个用于插件：

webpack.config.js：

`~/ViewModels/TestChunk/registrations.ts':

`~/ViewModels/Home/main.ts':

用法： ~/ViewModels/Components/ProjectAdministration/Test/projectAdminTest.vue

不幸的是，这显示了一个错误：

由于 webpack 4 和 react-loadable，我刚刚开始使用代码拆分和动态导入在服务器端渲染一个 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些东西我不太明白。

在服务器端，我正在等待 webpack 已加载所有模块，然后再将 html 吐出给客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器渲染加载的组件：

客户端水合加载组件：

显然，问题在于 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在匹配错误。

在几秒钟内，客户端首先呈现

而服务器已经渲染并发送给客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止在第一次渲染时出现不匹配？

我fetch-mock用来模拟使用 fetch 的实际组件。fetch-mock 不支持 ie11 并且希望仅在支持浏览器的情况下导入示例组件。我怎样才能做到这一点？

1. ABCExampleComponentfetch-mock用于ABCComponent 中使用fetch的模拟。
2. 仅当浏览器受支持时，LoadComponent 才应呈现 ABCExampleComponent。

加载组件

感谢您的建议。

我一直在尝试使用 import() 函数来导入运行时动态的东西。我认为只要我为文件创建一个条目，webpack 就可以足够聪明地 import() 正确的模块，但似乎并非如此。

有谁知道一种方法来分块一个条目并使用 import() 语法，给它一个变量，并让它在运行时工作？

根问题的一个简单示例如下：

使用动态导入时，我可以像常规导入一样定义我想要导入的内容吗？

例如：

作为动态：

我目前正在使用带有 Suspense 和 Lazy 的 React 16 来对我的代码库进行代码拆分。虽然我想预加载组件。

在下面的示例中，我有两条路线。有没有办法在安装Demo后立即预Prime加载？我试图在componentDidMount页面中创建另一个动态导入Prime，但React.lazy似乎没有得到与下面的动态导入相同的文件。

因此，我尝试了不同的方法，例如使用和不使用webpackChunkName以及在 中导入其他组件的不同方式，componentDidMount如下所示。导入文件的前两种方法componentDidMount导致了下图底部显示的 Webpack 错误。只有第三个继续，但2.[hash].js在图像中制作文件，仅在访问页面后加载，而不是在componentDidMount

我在这里想念什么？

代码modules/Demo.jsx：

我正在使用 webpack 4.26.1（最新）。

该代码import('./images/header.csv')产生以下错误：

未捕获（承诺）错误：在 webpackMissingModule (home.js:9) 找不到模块“./images/header.csv”

我的项目结构：

我试图阅读https://webpack.js.org/api/module-methods/但除了添加我不理解的随机 webpack 评论外，我不明白该怎么做。

另外，从文档中，我可能会找到问题的根源，但我不确定我是否理解它以及如何解决它。

完全动态的语句，例如 import(foo)，将会失败，因为 webpack 至少需要一些文件位置信息。这是因为 foo 可能是系统或项目中任何文件的任何路径。import() 必须至少包含有关模块所在位置的一些信息，因此可以将捆绑限制到特定目录或文件集。

包括可能在 import() 调用中请求的每个模块。例如， import( ./locale/${language}.json) 将导致 ./locale 目录中的每个 .json 文件捆绑到新块中。在运行时，当变量语言被计算出来后，任何像english.json 或 German.json 这样的文件都可以使用。使用 webpackInclude 和 webpackExclude 选项允许我们添加正则表达式模式，以减少 webpack 将为此导入捆绑的文件。

除了为我提供解决方案之外，我还将感谢任何涵盖我的代码实际问题的答案。

谢谢你。

我正在使用Webpack 3.8.1和React 16.6.3 ，我正在使用React.Lazy延迟加载嵌套在类似/vehicles/:vehicleId. 在这种情况下，当我尝试加载组件时，它会发送 HTTP 请求， /vehicle/static/js/1.7ed7c333.chunk.js而不是/static/js/1.7ed7c333.chunk.js发出 ERR_ABORTED 404 请求。

请求任何解决问题的线索表示赞赏。

调试时：我发现如果我将路由更改为/vehicles/延迟加载可以正常工作，但由于需要，我无法更改我的路由端点。

package.json我有"homepage": "./"，因为我需要从自定义路径而不是根路径提供页面。

我正在尝试在 Node.js 中动态导入 webpack

但是在我的终端中，我看到以下错误：

我在我的 .babelrc 中安装了 @babel/plugin-syntax-dynamic-import

我什至尝试将其添加到带有加载器“babel-loader”的 .js 规则下的 webpack conf 文件中。

我试图避免 CmJS

无论如何，我都会收到相同的错误，但找不到解决方案。有没有人经历过这个？谢谢

我在 Angular 7 中使用动态导入来减小初始供应商捆绑包的大小。

XLSX.WorkBook但是“找不到命名空间 XLSX”的类型有错误。
XLSX.read 工作正常。

问题：使用动态导入时如何定义类型？