import()和import的区别

import()函数

这个特性为JavaScript添加了一个类函数（function-like）的import()功能，以便可以像函数传参那样传入参数实现动态（没错，import是静态引用的）引用模块（module）。常用import()开启懒加载功能。

<script>  const main = document.querySelector("main");  for (const link of document.querySelectorAll("nav > a")) {    link.addEventListener("click", e => {      e.preventDefault();
      import(`./section-modules/${link.dataset.entryModule}.js`)//动态引用        .then(module => {//加载模块成功以后，该模块会当作then方法的参数          module.loadPageInto(main);        })        .catch(err => {//捕捉异常          main.textContent = err.message;        });    });  }</script>

如果模块采用default的形式对外暴露接口，则可用default属性直接获得。

import('./module.js').then(module => {  console.log(module.default);//直接通过default属性获得模块暴露的接口});

import()和import的区别：

• import() 可以用在script脚本区，不止是模块内；
• 如果在模块内使用import()，它可以在任何地方任何级别执行，而不是被提升到顶级（优先执行）；
• import() 是运行时执行，也即什么时候运行到这句，就会加载参数指定的模块；参数也可以是动态可变的，不止是静态参数；
• import() 不建立可静态分析的依赖关系（静态分析的情况下可以做很多优化），但是，在一些比较简单的情况下，比如import（“/foo.js”）中，实现仍然可以执行静态分析优化。