webpack中的import

Question

btn.onclick=function(){
  import(/* webpackChunkName:'lodash' */'lodash').then(()=>{
        console.log('lodash')
   })
}

上面的代码能正常运行
问题：
1.从语法的角度讲，import应该是一个函数，返回一个promise，但是直接console.log(import)会报错。

2.如果报错的原因是 import ... from '...' es6将import作为一个关键字,那么上面的代码为什么能将import作为一个函数？

Answer 1

？？？这问题看的我一脸懵逼……

import 是个关键字和它能不能作为一个函数，有一毛钱关系？？你是咋推导出它俩就互斥了？

所谓关键字，就是语言本身已经使用这个词表示有特殊含义了，你就不能把它当作变量名/类名/属性名了。这就叫关键字，跟这个词从语法上是个运算符还是个函数还是个别的什么没有半毛钱关系，既不充分也不必要。

按你的逻辑，super 也是个关键字，那还不能在 ES6 构造函数里用 super() 了？

---

目前 ES 规范里只有 import 'module.js'，这叫静态导入。

但如果有某些模块需要在运行时才会被导入（所谓的按需导入）怎么办？所有有了 import('module.js') 动态导入 的提案。

但要注意这个语法目前还不是规范，仅仅是提案而已（截止到我写下这段话的此时正处于 TC39-Stage3 阶段）。可能有部分新版浏览器已经提前支持了，但要想使用最好还是 babel。