javascript - 使用 Webpack 2 延迟加载样式表

Question

我想通过 <link> 延迟加载 CSS对于我使用 Webpack 2 构建的 React 应用程序。我理解 style-loader你可以有 import 'foo.css'内联在 <style> 中标签，但我正在寻找允许它使用 link 的解决方案可以延迟加载的标签，很像新的 import()使用 React Router 进行代码拆分。

是否有现有的加载程序可以执行此操作？

Answer 1

您可以尝试使用 html-webpack-plugin 创建自定义 HTML 模板.您将可以访问编译生成的所有 Assets ，并可以通过输出中的 link 标记引用您感兴趣的 Assets 。下一个重要的一点是使用 extract-text-webpack-plugin将 Webpack 配置为在 Assets 中发出单独的样式表。

或者，如果您想使用前向技术，您可以加入 offline-plugin并使用 service worker 预加载用户可能需要的 Assets 。如果您在拆分样式表时遇到问题，这可能会有所帮助，因为您可以简单地恢复到让 Webpack 弄清楚如何将您的应用程序拆分成 block (包括 CSS 源)，并且插件将确保这些是提前预取的。