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