webpack样式加载器是否意味着加载所有css?或者只是应用程序特定的CSS?

19 html javascript css amd webpack

我正在尝试使我的前端设计过程更加模块化,并且正在探索webpack.它支持样式加载器,它允许您导入css文件并将其注入文档中,如下所示:

require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
Run Code Online (Sandbox Code Playgroud)

但是,我的主要关注点是网站,而不是webapps 1,所以通过javascript添加css感觉很奇怪.但我可能只是老式的,所以我想知道:加载器是用于所有css,还是仅仅意味着加载css的小的,有条件的部分?

如果它可以用于加载所有的CSS,使用生成的webpack bundle.js来注入css而不是直接链接html中的css文件会有任何惩罚吗?除了javascript没有启用它明显破坏?


1:不同之处在于我的动态内容非常少,javascript在这些网站中只扮演次要角色,而且我没有使用javascript进行路由,但是页面上有静态的.html文件

Bry*_*her 15

尽可能使用HTML本身包含CSS.现代浏览器将在页面解析时开始获取CSS,有时甚至在JavaScript开始下载之前.您将在页面渲染速度方面获得改进,从而在装载机之外完成主要部分.

此外,如果您坚持主要的"核心"风格,您可以从缓存中受益,缓存的加载速度将比JavaScript快.

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/


在您的示例中,我通过将其拆分为多个部分并使用加载器和捆绑器来完成我在页面中加载的特定元素.应用程序外观,品牌等从标记加载,控制我的特定UI(例如,特定表单的布局)的行为是使用bundler或packer完成的.