webpack导入()动态加载模块踩坑详解

进口

根据ES2015加载程序规范，webpack实现了import()方法进行动态加载。

这个函数可以按需加载我们的代码，并使用promise回调来获取加载的包。

在代码中，所有模块import()将被打包到一个包中，并放在存储区块的目录中。当浏览器运行这一行代码时，会自动请求这个资源实现异步加载。

这里有一个简单的演示。

导入(' lodash ')。然后(_={//用lodash(又名“_”)做点什么).})，我们可以看到import()的语法非常简单。该函数只接受一个参数，即引用包的地址，与es6导入时使用的地址和CommonJS的require语法完全相同。可以实现无缝切换【美滋滋写定期替换】。

而且用Promise的包，开发起来感觉很舒服。[包装异步函数更好]

然而，这些只是表象。

只是表象。

我在开发的时候遇到了问题。场景如下：一个对象存储所有级别的路由信息及其相应的页面组件。为了减小主包的大小，我们希望动态加载这些页面。

同时，react-loaded用于简化组件的惰性加载封装。代码如下所示。

函数lazyLoad(路径){ return loadabled({ loader :()=import(路径)，loading: Spin，})；}然后我开始写lazyLoad('。/pages/XXX’)高兴地说。果然，我挂了。浏览器说没有鱼丸，没有粗面，不知道这个笨模块在哪里。

于是我查了一下官方文件，发现了一张黄色的纸条。

Emmm，看来就是这个问题。

实际上，这种现象与webpack import()的实现高度相关。webpack需要单独打包import()的所有模块，因此在项目打包阶段，webpack将收集依赖项。

此时，webpack将找到import()的所有调用，并将传入的参数处理成常规参数，例如：

导入('。/app' path'/util')=/\。\/app。* \/util $/也就是说，导入参数中的所有变量都将被替换为[。*]，根据此规则，webpack将找到所有符合条件的包，并将其打包为包。

因此，如果我们直接传入一个变量，webpack会认为你在戏弄他(整个电脑包都打包进去了[不要捣乱])，并抛出一个警告：临界依赖3360依赖的请求是一个表达式。

因此，正确的导入姿势应该是静态表达包所在的路径，尽量减少变量控制的区域。

如果我们想引用一堆页面组件，我们可以使用import('。/pages/' ComponentName)，这样我们就可以封装引用并避免打包冗余内容。

影响函数封装的另一点是import()中的相对路径，这是import语句所在文件的相对路径，所以在进一步封装导入时会有一些麻烦。

因为导入语句中的路径将在编译后被处理到webpack命令执行目录的相对路径中。

友好链接：https://webpack.js.org/api/module-methods/#import

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。