在 javascript 文件中缩小 CSS - 为什么？

Question

所以我们正在进行这个学校项目，并将修复代码的一些小问题。这与作业无关，而是我的好奇心。静态文件是用 index.html 和 app.min.js 定义的，index.html 是必需的。

在 app.min.js 文件中，css 定义如下：

    var css = "/*!\n * Bootstrap v3.3.5 (http://getbootstrap.com)\n * 
    Copyright` `2011-2015 Twitter, Inc.\n * Licensed under MIT 
    (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n *//*! normalize.css`
    v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-
    family:sans`-`serif;-webkit-text-size-adjust:100%;-ms-text-size-
    adjust:100%}body{margin:0}article,aside,details,figcaption,`.....

等等

并且以某种方式实例化。将 css 缩小到这样的 js 文件的目的是什么？你怎么做呢？查看了一个名为 css-to-js 的东西，但没有让它工作...

希望这个问题不要太挑剔，感谢您的回答！

Answer 1

通过仅下载一个文件来更快地加载页面是一种优化技术，但我认为将 css 放在 javascript 文件中是一种不好的做法。

How do you add CSS with Javascript?

Answer 2

实例化它并不难，请参阅堆栈片段。可以按照建议进行往返。更少的服务器调用。安全，没有人可以 link 到您的 css，但这种可能性很小。

我个人认为是可部署性。它确保您的项目始终具有所需的基本 CSS。不依赖于需要加载的额外文件。这很方便，但不太可能。

app.min.js 让我想起了 Visual Studio 个项目。所以这 CSS 可能是所有应用程序的基础。将其包含在代码中会产生比始终部署它更高的安全性。如前所述，更少的文件依赖。

var css = "/*!\n * Bootstrap v3.3.5 (http://getbootstrap.com)\n * Copyright` `2011-2015 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-   family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0; color: red;}";

var style = document.createElement("style");
style.textContent = css;
document.body.appendChild(style);

text in this body should turn red.

在 javascript 文件中缩小 CSS - 为什么？

Minified CSS in javascript file - Why?

html

javascript

css

minify