怎么在webpack中使用import()动态加载模块

怎么在webpack中使用import()动态加载模块？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

为陈巴尔虎等地区用户提供了全套网页设计制作服务，及陈巴尔虎网站建设行业解决方案。主营业务为网站制作、成都网站建设、陈巴尔虎网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

import

webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。

这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。

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

这里是一个简单的demo。

import('lodash').then(_ => {
  // Do something with lodash (a.k.a '_')...
 })

可以看到，import()的语法十分简单。该函数只接受一个参数，就是引用包的地址，这个地址与es6的import以及CommonJS的require语法用到的地址完全一致。可以实现无缝切换【写个正则替换美滋滋】。

并且使用了Promise的封装，开发起来感觉十分自在。【包装一个async函数就更爽了】

然而，以上只是表象。

只是表象。

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

同时使用了react-loadable来简化组件的懒加载封装。代码如下所示。

function lazyLoad(path) {
 return Loadable({
  loader: () => import(path),
  loading: Spin,
 });
}

然后我就开始开心的在代码中写上lazyLoad('./pages/xxx')。果不其然，挂了。浏览器表示，没有鱼丸没有粗面，也不知道这个傻逼模块在哪里。

于是我查看了官方文档，发现有一个黄条提示。

emmm，看来问题出在这里了。

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

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

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

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

因此，如果我们直接传入一个变量，webpack就会把 (整个电脑的包都打包进来[不闹]) 认为你在逗他，并且抛出一个WARNING: Critical dependency: the request of a dependency is an expression。

所以import的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。

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

另外一个影响功能封装的点，是import()中的相对路径，是import语句所在文件的相对路径，所以进一步封装import时会出现一些麻烦。

看完上述内容，你们掌握怎么在webpack中使用import()动态加载模块的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！