关于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）是非常有用的。