标签: dynamic-import

最近偶然发现了动态导入提案和Youtube视频.想到将它用于React中的组件按需导入是一个好主意.

遇到一个问题,当我import将字符串文字作为运行时变量传递时,我无法"解析"路径.

例如:

<div>
<button onClick={this._fetchComp.bind(this, "../component/Counter")}>
Get Asyn Comp
</button>
</div>

尝试了_fetchComp的多个选项,但传递参数似乎不起作用.尝试了不同选项的细分.

1. 模板字符串 不起作用:单击时出现以下错误

   Error Error: Cannot find module '../components/Counter'. at webpackAsyncContext (^.*$:53)

   码

   _fetchComp(res) {
   import(`${res}`).then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

2. Variabes 不起作用:在webpack构建过程中出现错误55:12-23 Critical dependency: the request of a dependency is an expression

   码

   _fetchComp(res) {
   import(res).then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

3. String literal Works:只传递纯字符串文字.点击后,我可以在开发工具网络选项卡中看到正在下载的块

   码

   _fetchComp(res) {
   import("../components/Counter").then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

根据规范,

import()接受任意字符串(此处显示运行时确定的模板字符串),而不仅仅是静态字符串文字. …

我一直在尝试importlib与python3（3.6）一起使用。

目录结构

main.py

#Note: I will only modify line 4 that uses importlib
import importlib
if __name__ == '__main__':
    print("In main.py")
    hello = importlib.import_module('hello', package='./')
    print("Loaded hello.py")
    hello.hello()

你好

def hello():
    print('Hello world')

文件夹/hello.py

def hello():
    print('Hello world in folder')

观察结果

如果我做

hello = importlib.import_module('hello', package='./') 要么

hello = importlib.import_module('hello')

它从根文件夹导入hello.py并进行打印hello world。

如果我做

hello = importlib.import_module('folder.hello')

它从根文件夹导入folder / hello.py并打印hello world in folder。

但是如果我这样做

hello = importlib.import_module('hello', package='folder') 要么

hello = …

考虑如下所示的 react-admin 应用程序。我打算代码分离的方式，在一切都'./posts'和'./users'在用户登录之后才加载。

我计划使用我可以使用的动态 import() 语法，以便webpack 自动开始对应用程序进行代码拆分。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。在东西的动态导入'./posts'，并'./users'因为它是在应用程序本身的进口也不会分裂。

如何设置和拆分此代码库，以便只有在用户登录后才加载'./posts'和'./users'加载内容？

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, …

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

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

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

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

所以基本上服务器呈现加载的组件：

<div>loaded component</div>

客户端对加载组件进行水合：

<div>loading...</div>

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

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

<div>loading...</div>

而服务器已呈现并发送到客户端，加载组件的 html。

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

我目前正在尝试以下策略来从相对于我的模块的路径动态加载 json 文件：

• 如果我的代码捆绑为 Webpack 捆绑包，请使用import(filename.json)
• 在任何其他情况下，请使用绝对路径回退到 AJAX 调用

以下似乎工作正常：

function parse (fileName, callback) {
  var path = "./relative/path/to/" + fileName + ".json";
  var cb = process.bind(this, fileName, callback);
  if (typeof webpackJsonp !== "undefined") { // <-- Test if run as Webpack bundle
    // Do dynamic import
  } else {
    // Do Ajax call
  }
}

但是，我找不到任何关于 的文档webpackJsonp，所以我认为这不是 Webpack 公共 API 的一部分。

我还注意到这webpackJsonp是 3.12 中的一个函数和一个Object（继承自Array），表明依赖 的存在、值或类型是多么脆弱webpackJsonp。

是否有一种（面向未来的）可靠的方法来测试我的代码是否使用公共 API 作为 …

我正在为我的应用程序（Vue.js）编写单元测试，并且在尝试测试动态导入模块的方法时遇到了麻烦。我想模拟库（文件保存器）以测试它是否被正确调用，但是我得到的只是一个错误。模拟文件将被完全忽略。

我曾经有一个“ require.ensure不是一个函数”错误，但是在设置babel-plugin-dynamic-import-node之后，该错误发生了变化。

这是我正在测试的方法：

file.js

[...]
   async saveFile() {
     import('file-saver').then(filesaver => {
       return filesaver.saveAs(data, name);
     })
   },
[...]

test.js

    describe('testing methods', () => {
      it('exports files correctly', async () => {
        wrapper.vm.exportAddressGroups();
      });
    });

跳到底部查看我遇到的错误。

这些是我的配置文件：

jest.config.json

{
  "rootDir": "../",
  "verbose": true,
  "moduleNameMapper": {
    "store/(.*)$": "<rootDir>/src/store/$1",
    "views/(.*)$": "<rootDir>/src/views/$1",
    "components/(.*)$": "<rootDir>/src/components/$1",
    "src/([^\\.]*)$": "<rootDir>/src/$1",
    "user/([^\\.]*)$": "<rootDir>/src/components/user/$1",
    "admin/([^\\.]*)$": "<rootDir>/src/components/admin/$1",
    "shared/([^\\.]*)$": "<rootDir>/src/components/shared/$1",
    "mobile/([^\\.]*)$": "<rootDir>/src/components/mobile/$1",
    "api/([^\\.]*)$": "<rootDir>/src/api/$1",
    "i18n/([^\\.]*)$": "<rootDir>/src/i18n/$1",
    "setup/([^\\.]*)$": "<rootDir>/test/setup/$1",
    "mocks/(.*)$": "<rootDir>/test/mocks/$1",
    "types/([^\\.]*)$": "<rootDir>/types/$1",
    "\\.(png|gif|ttf|eot|svg)$": "<rootDir>/test/mocks/file.js"
  },
  "moduleFileExtensions": ["js", "json", "vue"],
  "modulePathIgnorePatterns": ["<rootDir>/src/components/.*/index.js"],
  "coveragePathIgnorePatterns": …

我有以下示例运行，而 JS 在它上面没有打包器。

// index.js
;(async () => {
  const mod = await import('/index.json')

  console.log(mod)
})()

{
  "file": "index.json"
}

Chrome 80 无法加载 json

加载模块脚本失败：服务器以“application/json”的非 JavaScript MIME 类型响应。每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。

Firefox 73 以类似的方式失败：

由于不允许的 MIME 类型（“application/json”），从“ http://127.0.0.1:8080/index.json ”加载模块被阻止。

这种行为是可以克服的吗？

我想根据路由动态加载一个组件。我正在尝试制作一个可以加载任何单个组件以进行测试的页面。

但是，每当我尝试这样做时，import(path)它都会显示加载器但从未真正加载过。如果我对path包含的完全相同的字符串进行硬编码，则它可以正常工作。是什么赋予了？如何让nextjs实际动态导入动态导入？

// pages/test/[...component].js

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  const path = `../../components/${component.join('/')}`;

  console.log(path === '../../components/common/CircularLoader'); // prints true

  // This fails to load, despite path being identical to hard coded import
  const DynamicComponent = dynamic(() => import(path), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });

  // This seems to work
  const DynamicExample = dynamic(() => import('../../components/Example'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  }); …

我正在构建一个 next.js 应用程序，并且希望仅在加载整个页面后才加载 Google 跟踪代码管理器 (GTM)。其背后的目标是提高网站性能。

有没有人想出一种方法，让我可以在应用程序完全加载后运行第三方 JS 代码（如 GTM）？

我目前正在添加使用“传统”方式将 GTM 注入到我的 next.js 应用程序（源代码）中，方法是将<script>标签添加到文件中的标签中<Head>，并将<noscript>标签添加到文件<body>中的标签中_document.js：

<Head>
      {/* Google Tag Manager */}
      <script
        dangerouslySetInnerHTML={{
          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','GTM-XXXXXXX');`
        }}
      />
          {/* End Google Tag Manager */}
...
...
</Head>

<body style={{ backgroundColor: theme.palette.primary.background }}>
       {/* Google Tag Manager (noscript) */}
       <noscript
          dangerouslySetInnerHTML={{
            __html: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>'
          }}
      />
      {/* End Google Tag Manager …

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

例如：

import Person from '/classes.js'

作为动态：

await import('Person from /classes.js') //Incorrect obviously