异步代码分割

当你需要/导入一个JavaScript和CSS模块,Webpack将代码编译为最终的JavaScript和CSS文件。通常,这正是你想要的。但是,如果您只需要使用一段代码在一定条件下?例如,如果您想要使用video.js播放视频,但只有当用户点击一个链接:

1 2 3 4 5 6 7 8 9 10

/ /资产/ app.js进口美元从jquery的;/ /一个虚构的“大”模块(如进口视频。js内部)进口放像机从“/组件/放像机。”;$ (“.js-open-video”)内(“点击”,函数(){/ /使用较大的放像机模块常量球员=新放像机(某个元素的);});

在这个例子中,放像机模块和一切进口将打包成最后,构建JavaScript文件,即使它可能不是很常见的真正需要它的人。一个更好的解决方案是使用动态的进口:通过AJAX加载代码时需要:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/ /资产/ app.js进口美元从jquery的;$ (“.js-open-video”)内(“点击”,函数(){/ /这里可以开始加载动画/ /使用进口()函数,它返回一个承诺进口(“/组件/放像机。”)(({默认的:放像机})= >{/ /你可以停止加载动画/ /使用较大的放像机模块常量球员=新放像机(某个元素的);}).catch (错误= >当加载组件发生错误的);});

通过使用进口()像一个函数,该模块将异步和下载那就是()回调将执行的时候完成。的放像机参数的回调将加载模块。换句话说,它就像正常的AJAX调用!在幕后,Webpack将打包放像机(如模块到一个单独的文件。js 0.所以它可以下载。为你所有的细节处理。

的{默认值:放像机}部分可能看起来很奇怪。当使用异步导入,你那就是()回调函数传递一个对象,实际模块是一个.default关键。有理由这样做,但它确实看起来古怪的。的{默认值:放像机}确保代码放像机模块我们想要的是阅读.default财产。

更多的细节和配置选项,请参阅动态的进口Webpack的文档。欧宝官网下载app