CLIを使用して角度アプリケーションをロードした後にスタイルをロードする

今では、既存の角度アプリケーションを移植して、cliをリリースしました。しかし、アプリケーションのロードが開始された後にスタイルがロードされていることに気付きました。アプリケーションの読み込み中に、ページの中央に表示されている読み込み用GIFを表示します。今起こっているのは、ページの左上に分割して表示され、スタイルがGIFを中心にロードされてからアプリケーションがロードされるということです。CLIを使用して角度アプリケーションをロードした後にスタイルをロードする

CSSを読み込んでいるHTMLページの上部にリンクタグがあるかのように振る舞いを模倣する方法はありますか？今はjsファイルに自分のスタイルをバンドルし、bodyタグの最後に読み込まれて遅延が発生します。

マイ.angular-cli.jsonは以下の通りです：あなたは、「ロード・ページ」のスーパーきびきび負荷をしたい場合は

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "program-quick-view-cli" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "assets/styles/main.scss" 
     ], 
     "scripts": [ 
     "assets/js/pdfmake.min.js", 
     "assets/js/Treant.js", 
     "assets/js/vfs_fonts.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json" 
    }, 
    { 
     "project": "src/tsconfig.spec.json" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "scss", 
    "component": {} 
    } 
}

出典

2017-03-27 atsituab

読み込み中のページのスタイルだけをindex.htmlに直接挿入して埋め込むことをお勧めします。したがって、ロードプロセスのどの時点でもFOUCを取得することはできません。実際には、追加のリクエストを必要としないように、ロードグラフィックをCSSに埋め込んでいます。 –

@ SteveG。申し訳ありませんが、FOUCは何を意味していますか？ – atsituab

は、私が直接あなたの読み込みページのためだけのスタイルを埋め込む/注入することをお勧めあなたのindex.html、ロードプロセスの任意の時点でFOUC (Flash of Unstyled Content)を取得しないでください。実際には、追加のリクエストを必要としないように、ロードグラフィックをCSSに埋め込むこともできます。（SVGを使用して）例えば

：あなたはGIFを使用している場合

<html> 
<head> 
    <!-- ... --> 
    <style> 
     @keyframes knock-their-socks-off { 
      /* ... */ 
     } 

     .cool-loader { 
      /* ... */ 
      animation: knock-their-socks-off 10s infinite; 
      background-image: url("data:image/svg+xml;utf8,<svg ..."); 
      /* ... */ 
     } 
    </style> 
    <!-- ... --> 
</head> 
<body> 
    <!-- ... --> 
    <app-root> 
     <div class="cool-loader"></div> 
    </app-root> 
    <link rel="stylesheet" href="/rest-of-site.css" ...> 
    <!-- ... --> 
</body> 
</html>

、あなたは埋め込むためにそれをBase64でエンコードすることができます。ファイルが大きければ大きいほど、index.htmlが膨らんでいくことに注意してください。

出典

2017-03-27 18:42:12

は本当に唯一の回避策ですか？私はそれに問題はありませんが、自分のスタイルを私のインデックスhtmlに入れなければならないと私にはばかげているようです。 – atsituab

それはもっとあなたのための "個人的な選択"です。通常、Web最適化では、要求は[一般的に] Webページの負荷の「高価な部分」です。この手法を使用すると、埋め込みを使用してリクエストを減らし、リモートリクエストで発生する可能性のある遅延をなくします。遅い接続。（これはあなたの読み込みページなので、読み込み中の他の項目をブロックしないようにしたいと思っています）。この読み込みクラスは、アプリケーションの他の場所でも再利用できます。 –

私はそれと一緒に暮らすことができます！ – atsituab

CLIを使用して角度アプリケーションをロードした後にスタイルをロードする

答えて

関連する問題