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)，這樣就可以實作引用的封裝，同時也避免打包多餘的内容。