フロントエンドで白い画面が表示される理由:
-
JS の問題に
よく使用されるフレームワークである Vue React Angular は JS によって駆動され、単一ページ アプリケーションの HTML も JS によって生成されます。ページをレンダリングするときは、大きな JS ファイル ( app.js および Vendor.js ) が必要です。 JS でロードおよび解析される ロードが完了するまでページを表示できず、白い画面が表示されます (ネットワーク速度が良くない場合は、ある程度の白い画面も表示されます)。 -
ブラウザの互換性の問題
vue コードが ie で白い画面を表示する -
URL URL が無効であるか、中国語の文字が含まれています
-
キャッシュによりvue プロジェクト パッケージ が参照さ
れるため、オンラインで dist ファイルを初めて置き換えるときに、一部の携帯電話/ブラウザでは後で初めてページが開き、白い画面が表示されることがあります。理由: Index.html エントリ ファイルはデフォルトでクライアント側でキャッシュされ、vue パッケージ化によって生成された css/js はすべてハッシュ値であり、最後のファイル名とは異なるため、css/js は見つかりません。 . 白い画面が表示されます。サーバー側でパッケージが更新されると、古いファイルが削除され、index.html でリンクされているパスが古いファイルのパスのままであるため、ファイルが見つからず、白い画面が表示されます。
-
ページエラー
解決：
アイデア: パッケージ化されたボリュームを削減します (sourceMap がオフになり、CDN が導入され、ルーティングが遅延ロードされ、コンポーネントがオンデマンドでロードされます)
レンダリング速度を向上させます。
ユーザーエクスペリエンスを最適化します。
CDN リソースの最適化:
- 依存するサードパーティの npm パッケージをすべて CDN リンク経由で取得するように変更し、対応するリンクをindex.html に挿入します。
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>
- vue.config.js で externals プロパティを構成する
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios',
'element-ui': 'ElementUI'
}
}
- 関連する依存 npm パッケージをアンインストールする
npm uninstall xxx
gzip圧縮を使用する
フロントエンド処理:
// npm i compression-webpack-plugin -S
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
productionSourceMap: false,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
// 匹配规格
test: /\.js$|\.html$|\.css$|\.png$/,
// 文件超过多大进行压缩 单位Byte
threshold: 10240,
// 是否删除源文件（建议不删除）
deleteOriginalAssets: false
})
],
}
}
},
}
nginx で gzip 圧縮を有効にする必要もあります。例:
gzip on;
gzip_static on; //当存在.gzip格式的js文件时，优先使用静态文件
gzip_min_length 10k; //开启gzip压缩的最小大小
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
**注意:** nginx で gzip 圧縮を有効にすると、フロントエンドによってパッケージ化されたファイルが圧縮されているかどうかに関係なく、Web サイトによってロードされた js ファイルはすべて nginx によってリアルタイムで圧縮されます。
gzip_static がオフの場合、フロントエンドによってアップロードされた js 圧縮ファイル (gzip 形式のもの) は役に立ちません。
gzip_static がオンの場合、フロントエンドでパッケージ化された gzip 圧縮ファイルが最初に読み込まれますが、ファイルが見つからない場合は、nginx がリアルタイムで圧縮してブラウザに渡します。
SSR サーバーレンダリング
ホームページと読み込み画面またはスケルトン画面(エクスペリエンスを最適化するためのみ)
elementUにはスケルトン画面コンポーネント（Skeleton）があります
いわゆるスケルトン画面は、ページコンテンツがロードされていないときにグラフィックスを使用してその場所を占め、コンテンツがロードされた後に置き換えられます。このプロセス中に、ユーザーはコンテンツが徐々に読み込まれ、すぐに表示されることを認識し、「白い画面」の不快なエクスペリエンスが軽減されます。