使用Webpack 2实现样式表的懒加载

Question

我希望能够通过 <link> 懒加载 CSS，在使用 Webpack 2 构建的 React 应用中。我知道可以使用 style-loader 将 import 'foo.css' 内联在 <style> 标签中，但我正在寻找一种解决方案，允许它使用可以懒加载的 link 标签，就像新的 import() 与 React Router 进行代码分割一样。

是否存在现有的加载器可以做到这一点？

- Spencer Carnage

Answer 1

你可以尝试使用html-webpack-plugin创建自定义的HTML模板。利用编译生成的所有资源，你可以通过输出中的link标签引用感兴趣的资源。接下来重要的一点是使用extract-text-webpack-plugin配置Webpack以在资源中生成单独的样式表。

另外，如果你想要使用最新的技术，你可以结合offline-plugin并使用服务工作器来预加载用户可能需要的资源。如果你在拆分样式表方面遇到麻烦，这可能会有所帮助，因为你可以简单地让Webpack自动拆分应用程序（包括CSS源码）成块，并且该插件将确保提前预取这些资源。

- Filip Dupanović

---

我已经掌握了提取文本部分，但是我不知道如何让视图加载必要的<link>标签和JS。如果后端使用PHP可能会有所不同。 - Spencer Carnage