1.理由：
シングルページアプリケーションのhtmlはjsによって生成されます。これは、最初の画面で大きなjsファイル（app.jsおよびvendor.js）をロードする必要があるため、ネットワーク速度が遅い場合、ある程度の白い画面が生成されます。
2.解決策：解決策：
1.ルーティングとコンポーネントの遅延読み込み
1.遅延読み込みをルーティングする
// 1、Vue异步组件技术：
{
path: '/home',
name: 'Home',
component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
}
// 3、webpack提供的require.ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('../views/home.vue')), 'home')
}
2.コンポーネントの遅延読み込み
components:{
"dailyModal":()=>import("./dailyModal.vue")
},
components:{
"dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},
2.CDNリソースの最適化
CDNのフルネームはコンテンツ配信ネットワーク、つまりコンテンツ配信ネットワークです。CDNは、ネットワーク上に構築されたコンテンツ配信ネットワークであり、中央プラットフォームの負荷分散、コンテンツ配信、スケジューリング、およびその他の機能モジュールを通じて、さまざまな場所に配置されたエッジサーバーに依存しているため、ユーザーは近くの必要なコンテンツを取得し、ネットワークを削減できます。輻輳、およびユーザーアクセスの改善応答速度とヒット率。CDNの主要なテクノロジーには、主にコンテンツの保存と配信のテクノロジーが含まれます。
プロジェクトがどんどん大きくなるにつれて、ますます多くのサードパーティのnpmパッケージが信頼され、ビルド後のファイルはどんどん大きくなります。シングルページアプリケーションと組み合わせると、ネットワーク速度が遅い場合やサーバーの帯域幅が制限されている場合に、長期間の白い画面が表示されます。現時点では、CDN方式を使用してネットワークの読み込み速度を最適化できます。
1. vue、vue-router、vuex、axiosなどのvueファミリーバケットのリソースを変更して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>
2.vue.config.jsでexternalsプロパティを構成します
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}
3.関連する依存npmパッケージをアンインストールします
npm uninstall vue vue-router vuex axios
3.gZipアクセラレーションの最適化
最新のブラウザはすべてgzip圧縮をサポートしています。gzip圧縮を有効にすると、送信リソースのサイズが大幅に削減されるため、リソースのダウンロード時間が短縮され、最初の白い画面の時間が短縮され、ユーザーエクスペリエンスが向上します。
gzipは、テキストベースのファイル（CSS、JavaScript、HTMLなど）に対して最高の圧縮効果を発揮します。大きなファイルを圧縮する場合、最大70〜90％の圧縮率を達成できることがよくあります。圧縮されたリソース（写真）gzip圧縮の効果は非常に悪いです。
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new CompressionPlugin({
// gzip压缩配置
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
})
)
}
}
4. vue.config.jsのマップファイルを閉じます。これにより、多くのマップファイルを減らすことができます。
productionSourceMapは、エラーを報告するときにコード位置を見つけるために使用されます
productionSourceMap: false,
5. SSR、サーバー側レンダリング、サーバー側のホームページに必要なhtmlを事前にアセンブルします
6.ホームページに読み込み画面またはスケルトン画面を追加します（最適化されたエクスペリエンス）
フロントエンド業界でのSPAの人気が徐々に高まっているため、シングルページアプリケーションは必然的にホームページの読み込みに圧力をかけます。現時点では、優れたホームページのユーザーエクスペリエンスが重要です。多くのアプリは、「スケルトン画面」方式を使用してアンロードされたコンテンツを表示し、ユーザーにまったく新しいエクスペリエンスを提供します。
いわゆるスケルトン画面は、ページコンテンツがロードされていないときにいくつかのグラフィックを使用して実行し、コンテンツがロードされた後にそれを置き換えることです。このプロセスでは、ユーザーはコンテンツが徐々に読み込まれ、すぐに表示されることを認識し、「白い画面」の悪いエクスペリエンスを減らします。
https://segmentfault.com/a/1190000020124630?utm_source=tag-newest