import()使用过程中，令你百思不得其解的坑

import() 函数是ES6的一个提案，专门用于动态加载模块的，正常情况下，如下代码，完美运行，无任何问题。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
});
           

一旦把import中的参数改成变量,如下代码，就会报  the request of a dependency is an expression    Cannot find module './dialogBox.js'，你说气人不。

let url="./dialogBox.js";
button.addEventListener('click', event => {
  import(url)
  .then(dialogBox => {
    dialogBox.open();
  })
});
           

这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。

此时，webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：

import('./app'+path+'/util') => /^\.\/app.*\/util$/
      

也就是说，import参数中的所有变量，都会被替换为    .*   ，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。

因此，如果我们直接传入一个变量，webpack就会把 (整个电脑的包都打包进来) 所以import的正确姿势，应该是

尽可能静态化表达包所处的路径，最小化变量控制的区域

。如我们要引用一堆页面组件，可以使用import('./pages/'+ComponentName)，这样就可以实现引用的封装，同时也避免打包多余的内容。