使用Webpack 2延迟加载样式表

Question

我想通过<link>为我的使用Webpack 2构建的React应用程序延迟加载CSS。我理解，使用style-loader，您可以import 'foo.css'内联{ {1}}标记，但我正在寻找一种解决方案，允许它使用可以延迟加载的<style>标记，就像新的link用于使用React Router进行代码拆分一样。< / p>

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

Answer 1

您可以尝试使用html-webpack-plugin创建自定义HTML模板。您可以访问使用编辑生成的所有资产，并可以通过输出中的$number = [int]255 $bytes = [System.BitConverter]::GetBytes($number) [System.IO.File]::WriteAllBytes('C:\MyPath\To\File.bin', $bytes) 标记引用您感兴趣的资产。下一个重要的用途是使用extract-text-webpack-plugin配置Webpack在资产中发出单独的样式表。

或者，如果您希望使用前向技术，可以混合使用offline-plugin并使用服务工作人员预加载用户可能需要的资产。如果您在分割样式表时遇到问题，这可能会有所帮助，因为您可以简单地让Webpack弄清楚如何将应用程序拆分为块（包括CSS源代码），插件将确保提前预取这些内容。