javascriptファイルのCSSの縮小 - なぜですか？

Question

私たちはこの学校プロジェクトを行っており、小さな問題をコードで修正しようとしています。これは、割り当てとは関係なく、むしろ私の好奇心。静的ファイルはindex.htmlとapp.min.jsで定義されています。index.htmlにはこのファイルが必要です。

app.min.js -fileでは、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,`..... 

など

何とかインスタンス化されます。このようなjsファイルにCSSを縮小する目的は何ですか？どうやってやるの？ css-to-jsと呼ばれるものを見つけましたが、うまく動作しませんでした...

この質問はあまりにも難解ではありません、答えに感謝！

Answer 1

それは難しいことではありませんインスタンス化し、スタックスニペットを参照してください。それは示唆されるように往復することができます。より少ないサーバーコール。セキュリティ、誰もあなたの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.

Answer 2

1つのファイルだけをダウンロードしてページを高速に読み込む最適化手法ですが、JavaScriptをCSSファイルに入れるのは悪い習慣だと思います。

How do you add CSS with Javascript?