import() 动态模块导入

[yangbo5207]

https://github.com/tc39/proposal-dynamic-import

import(`static/images/${query.name}`)
  .then(url => {
    console.log(url)
  })

需要注意的坑：

1. import {} from xxx 导入的变量，不能直接用于动态拼接导入别的模块。例如

import { lang } from 'utils/i18n';

// import(`./w-8ben/${lang}`)  无法引入成功

// 解决办法
const file = lang;
import (`./w-8ben/${file}`)

2. 不可以直接import(foo)这种纯变量，import()中必须穿插基本的路径字符串

   const path = './somepath/foo'
   // import(path) 引入失败
   import('./somepath/foo')  // 成功

import(''./somepath/' + foo) 这种其实是会解析成一个正则，类似 /.somepath\/.*/ 然后匹配所有模块路径。import(foo) 这种就无法解析成正则了。

import(''./somepath/' + foo) 这种会导致somepath下所有的文件都被打包成chunk。import('./somepath/' + foo + '.jpg') 这是更好的用法，比如我只需要导入jpg图片的话 这种就只会匹配 /.somepath\/.*.jpg/ ，非jpg结尾的文件就不会被打包