Chrome 63はダイナミックインポートを正式にサポートしています|Dynamic import()

dev-reading/feは、dev-reading/feの学習知識に依存しないで、読書、ガイド、速読のrepoである.本repoは文章の内容を迅速に理解するツールにすぎず、全文の解読と翻訳を提供していない.このプラットフォームを通じて、文章の内容を迅速に理解し、興味のある文章を見つけて、全文を読むことができます.
本住所:https://github.com/dev-readin...
読書時間は約1分です

ブラウザサポート:Chrome 63、Safari 24プレビュー版

TC39 proposal:https://github.com/tc39/propo...

Stage:3

仕様:https://tc39.github.io/propos...

Static import
Chrome 61はES 2015のmodulesをサポートし始めた.importにインポートされたモジュールは、文字列の字面量であり、変数ではありません.importはコンパイル時に決定されるため、実行時よりも早い.次のコードがエラーを報告します.

if (name === 'jjc') {
  import myName from './jjc';
} else {
  import myName from './other';
}

次のコードも間違っています.

const name = 'jjc';
import myName from name;

静的インポートは、コンパイルフェーズでコードの静的解析、構築、tree-shakingなどを行うことができます.
Dynamic import()
ダイナミックインポートでは、オンデマンドインポートなどのプロパティを実行できます.
構文:

import(moduleSpecifier)

import() Promiseを返します

  const moduleSpecifier = './utils.js';
  import(moduleSpecifier)
    .then((module) => {
      // doSth.
    });

注意:import()は関数呼び出しのように見えますが、importはカッコ構文を適切に使用しているだけです(super()に似ています).これは、importがFunction.prototypeから継承されたわけではないので、callおよびapplyは使用できないことを意味する.const importAlias = importを使ってもダメです.さらに、importはまったく対象ではありません!
推奨
「静的import」も「動的import()」も同様に重要です.静的インポートを使用すると、実行前にモジュールの依存関係を構築できます.動的インポートでは、実行時にモジュールをオンデマンドでロードできます.
原文を読む:Dynamic import()
ディスカッションアドレス:ダイナミックimport()
ディスカッションに参加したい場合は、ここをクリックしてください.