问题标签 [dynamic-import]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
typescript - 如何通过动态导入异步导入模块的导出函数并调用它？
在 Promise 的异步回调函数中
我试过了
得到：
[ts] 无法调用类型缺少调用签名的表达式。类型“从不”没有兼容的调用签名。
然后我尝试了：
得到：
[ts] 类型 'typeof import("
<path-to-npm-module>' 不可分配给类型 'Function'。类型 'typeof import(" ' 中缺少属性 'apply'<path-to-npm-module>。
javascript - 在 webpack 中通过动态导入避免后续 API 请求
我有一个应用程序，它可以从更大的多页乐谱中转录和分析短乐谱。每个分数都可以从下拉选择中单独提供给用户。一次只加载一个分数，用户通常只会对任何给定会话中的少量分数感兴趣。最近我开始使用 Webpack，每个乐谱都使用动态导入分离到自己的包中。即使我有大量的分数（>50），应用程序的增量性质意味着它们仍然需要分解成自己独立的包，可以在运行时单独加载。
我遇到的问题是每个分数也有自己的数据，这些数据是通过 API 请求从后端（Django）拉下来的。所以现在当用户为给定分数加载模块时（至少在第一次），我有两个请求被执行：模块的包，然后是一个额外的 API 请求来获取数据：
我怎样才能避免这种情况？理想情况下，我希望将数据与请求的块捆绑在一起，完全放弃 API 请求，但是有没有办法使用 Webpack 来做到这一点？或者可能将 import 语句和 API fetch 都包装在 Promise 中？
webpack - Webpack：可以将摇树应用于预处理动态导入吗？
我正在查看基于承诺的 webpack 中的动态导入：
import('chunk').then(chunk => {...do something with chunk...}).
在这种情况下，webpack 是否有消除死代码的方法？似乎默认情况下会导入整个 esModule，而无需提前指定您需要的内容。
更新
澄清一下，当您只需要模块“A.js”中的函数“f”时，您可以像这样动态导入它：
这是动态的类似物：
但是，据我所知，webpack 无法通过在动态版本中从“A.js”中删除不需要的函数来优化包，即使我只解构并使用其中一个，我也总是得到整个模块可能的出口。
这只是 webpack 对动态加载模块的死代码检测的限制吗？
webpack - 我可以在 webpack 4 中使用浏览器原生导入吗？
在某些情况下，我不想在 webpack 4 中使用 webpack 转换来动态导入。
我们可以通过一些选项来做到这一点吗？
这/components/Greeting.js是在服务器上预编译的。它可以在没有 webpack 的情况下在 chrome 中正常工作。
webpack 正在尝试编译并发出错误
json - 业力打字稿需要 json 文件不起作用
在我的 TypeScript 项目中，我将像这样加载我的翻译文件：
这在使用 webpack 提供页面时效果很好。但是在我使用 Karma 进行的单元测试中，我使用karma-typescript了上面的代码会给出错误：
我看过这个测试，似乎我在做正确的事情。
我的tsconfig.json：
我的karma.conf.ts：
还有我的依赖：
编辑 1：刚刚意识到这可能与导入动态模块有关，所以我重构了我的 require 代码，如下所示：
这不会使 Karma 崩溃，但在运行测试时仍然给我一个错误：
reactjs - 使用 React Loadable 封装在 HOC 中的代码拆分路由组件
我在使用React Loadable和使用 Webpack 3.11 的基于路由的代码拆分时遇到了问题。
当我尝试在服务器上渲染我的应用程序时，我的异步模块会立即解析，而无需等待承诺。因此 SSR 输出变为<div id="root"></div>。
应用程序.js：
我已经用 React Loadable 定义了我的异步路由组件，如下所示：
路由.js
WithSettings.js
我已经设法将其缩小到WithSettings我用来包装我的路由组件的 HOC。如果我不使用WithSettingsHOC（与 Article 路由一样），那么我的 SSR 输出将等待异步导入完成，并且服务器生成的 html 包含与路由相关的标记（好！）。如果我确实使用了 HOC（与 Page 路由一样），那么模块会立即解析，并且我的 SSR 输出变为，<div id="root"></div因为它不再等待动态导入在渲染之前完成。问题是：我在所有路由中都需要 WithSettings HOC，因为它从服务器获取我需要呈现应用程序的所需数据。
谁能告诉我如何使用 HOC并将React Loadable 的异步组件用于路由组件，以便它在服务器上工作？
javascript - Webpack javascript Object.assign 与“=”
我正在使用 webpack 运行一个项目并遇到问题。我解决了它，但我想了解事情是如何运作的。
我有一个带有模块名称的数组，例如[module1,module2,module3]. 我使用foreach循环这个数组并使用以下语法导入每个模块。
在每个模块中，我创建并返回对象“我”。每个模块都有特定的功能和参数，这些对问题并不重要。
当我在一页上有 2 个模块时会出现问题。赋值me = this，即使我传递不同的选项，总是以某种方式创建具有相同参数的相同对象。
我通过将分配更改为var me = Object.assign({},this);
但我不明白第一个有什么问题来解决它。你能给我一些解释吗？
webpack - 如何使用 Webpack 4 同时获得动态导入和 SplitChunksPlugin 的好处？
是否有可能同时获得动态导入和拆分块（SplitChunksPlugin）的好处？
动态导入
当我使用动态导入时，每个已动态导入的库都会得到一个块。但是，任何静态导入的东西都会被添加到同一个（大）包中。伪代码：
结果是：
foolib.bundle.js只包含foolib，很棒my-module.bundle.js包含my-module和每个静态导入，不是很好
SplitChunks插件
做我想要的另一半。伪代码：
结果是：
my-module.bundle.js仅包含my-module，很棒vendors.bundle.js包含所有 node_modules 依赖项，很棒
但是，这个解决方案缺乏动态加载。
带有自定义块的动态导入
这个想法是这个配置会让我得到所有的东西。
foolib.bundle.js仅包含foolib因为它是动态导入的my-module.bundle.jsmy-module仅包含vendors.bundle.js包含所有 node_modules 依赖项
到目前为止，我得到的结果是，当您将optimization密钥（添加 splitChunks）添加到webpack.config.js.
我应该在什么方向进一步调查？我的直觉是，也许我可以找到一种方法来更好地调整动态导入生成块的方式，但也许我错了？
webpack - 如何在 DOM 准备好之前开始动态加载 JS？
我正在尝试尽快动态加载外部 JS 文件，但我观察到该文件仅在加载所有初始脚本后才开始加载（在 Chrome 和 FF 中）。有没有办法在此之前启动动态加载？
我已经尝试过 Webpack 动态导入和<script>在<head>.
javascript - Webpack - 动态导入一个类
我试图在满足路由器条件时动态导入一个类。
我导入标准（非类）模块没有问题，因为它按预期工作：
但是尝试对班级做同样的事情并没有按预期工作。
哪个失败'e.initialise不是一个函数'；
我还尝试使用new关键字来实例化类：
但是还是不开心！
在这种情况下如何动态导入一个类？
更新：
这是我的 Map 模块，作为一个非类模块，它可以工作：
这是同一个模块，但作为一个类：