Webpack import()动态加载模块实战与问题解析
Webpack 的动态加载方式import()，确实蛮香的，尤其是做代码分割时，用得顺手还挺省心。
动态加载模块的核心就是一个import()函数，传个模块路径就能返回一个Promise，异步拉模块进来，主包也就轻了不少，页面加载速度立马就上来了。
比如你想用lodash，直接来一句：
import('lodash').then(_ => {
// 用起来就跟平时一样
});但说实话，用起来没你想的那么简单，尤其是模块路径不是固定的时候，比如动态路由加载页面组件那种。你要是直接传个变量进去，Webpack 就抓狂了，打包时它根本不知道你要加载哪个模块。
Webpack 喜欢静态的路径，它要提前把要用的模块打包进去。你如果传了变量，它就开始警告你：Critical dependency: the request of a dependency is an expression。怎么破？路径拼接是个比较实用的方式，比如：
import(`./pages/${ComponentName}`)这样虽然看起来像变量，其实 Webpack 能识别出你是从./pages/里加载模块，它就会把那一整块打包进去，稍微大了一点但也能接受。
还有一个小坑，就是相对路径的问题。你在某个文件里写的import()路径，其实是相对于那个文件本身的，不是你项目根目录。多人封装了个高阶组件，结果路径错了半天才发现。
所以，如果你经常用import()，建议你：
- 路径尽量静态，别传变量
- 用模板字符串拼路径时注意目录结构
- 封装时多测试下路径，不然编译后才发现错就晚了
动态加载说简单也简单，说复杂也挺绕，关键还是多踩几次坑就知道哪里要留神了。你要是对 Webpack 更感兴趣，可以看看这些文章，都是干货：
文件大小：64.42KB
评论区