异步代码分割

当您需要/导入JavaScript或CSS模块时，Webpack将该代码编译成最终的JavaScript或CSS文件。通常，这正是你想要的。但是，如果您只需要在特定条件下使用一段代码呢?比如，如果你想用video.js播放视频，但只在用户点击链接后播放:

1 2 3 4 5 6 7 8 9 10

/ /资产/ js / app.js进口＄从jquery的；//一个虚构的“大”模块(例如，它在内部导入video.js)进口放像机从“/组件/放像机。”；$ (“.js-open-video”)内(“点击”，函数（）｛//使用较大的VideoPlayer模块常量球员=新放像机(某个元素的）;})；

在本例中，VideoPlayer模块及其导入的所有内容都将打包到最终构建的JavaScript文件中，尽管对于实际需要它的人来说可能并不常见。更好的解决办法是使用动态的进口:在需要时通过AJAX加载代码:

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

/ /资产/ js / app.js进口＄从jquery的；$ (“.js-open-video”)内(“点击”，函数（）｛//你可以在这里开始加载动画//使用import()作为函数-它返回一个Promise进口（“/组件/放像机。”) (（｛默认的: VideoPlayer}) = >｛//你可以在这里停止加载动画//使用较大的VideoPlayer模块常量球员=新放像机(某个元素的）;}) .catch (错误= >“加载组件时发生错误”）;})；

通过使用进口()与函数一样，该模块将异步下载那就是()回调将在它完成时执行。的放像机参数将是加载的模块。换句话说，它就像正常的AJAX调用一样工作!在幕后，Webpack将打包放像机模块放到一个单独的文件中(例如:js 0.)，以供下载。所有的细节都为您处理好了。

的{默认:VideoPlayer}部分可能看起来很奇怪。当使用异步导入时，您的那就是()回调函数传递一个对象，其中实际模块位于.default关键。这样做是有原因的，但它确实看起来很奇怪。的{默认:VideoPlayer}代码确保放像机我们想要的模块是从这里读取的.default财产。

有关详细信息和配置选项，请参见动态的进口Webpack的文档。欧宝官网下载app