關於import

這裏的import包含3個概念

1：import 語句
2：import函數
3：webpack 模塊文件裏的import函數

查看caniuse，結果以下：

import 語句：https://www.caniuse.com/#feat...
import 函數：https://www.caniuse.com/#feat...

能夠看出 import 函數的支持率略低於import 語句，

目前爲止，import函數已經被歸入了stage4: https://github.com/tc39/propo...

import('./ys.js').then(function function_name (g4) {
    // body...
    alert(g4.t); //'t'
})

ys.js：

export var t = 't';
export var tt = 'tt';

webpack裏的import 通瀏覽器原生支持的import函數 仍是有差異的

主要是能夠混合其餘模塊規則一塊兒混用，好比

import('commonJS module')

此外還支持 Magic Comments

相似參數同樣，可是是經過註釋的方式告知webpack：

// 單個目標
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'module'
);

// 多個可能目標
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

webpackMode：從 webpack 2.6.0 開始，能夠指定以不一樣的模式解析動態導入。支持如下選項：

"lazy"（默認）：爲每一個 import() 導入的模塊，生成一個可延遲加載(lazy-loadable) chunk。

"lazy-once"：生成一個能夠知足全部 import() 調用的單個可延遲加載(lazy-loadable) chunk。此 chunk 將在第一次

import() 調用時獲取，隨後的 import() 調用將使用相同的網絡響應。注意，這種模式僅在部分動態語句中有意義，例如

import(./locales/${language}.json)，其中可能含有多個被請求的模塊路徑。

"eager"：不會生成額外的 chunk，全部模塊都被當前 chunk 引入，而且沒有額外的網絡請求。仍然會返回 Promise，可是是

resolved 狀態。和靜態導入相對比，在調用 import（）完成以前，該模塊不會被執行。

"weak"：嘗試加載模塊，若是該模塊函數已經以其餘方式加載（即，另外一個 chunk 導入過此模塊，或包含模塊的腳本被加載）。仍然會返回 Promise，可是隻有在客戶端上已經有該 chunk 時才成功解析。若是該模塊不可用，Promise 將會是 rejected 狀態，而且網絡請求永遠不會執行。當須要的 chunks 始終在（嵌入在頁面中的）初始請求中手動提供，而不是在應用程序導航在最初沒有提供的模塊導入的狀況觸發，這對於通用渲染（SSR）是很是有用的。