Vue での SPA の最初の画面読み込みの最適化 (詳細なチュートリアル)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue での SPA の最初の画面読み込みの最適化 (詳細なチュートリアル)

亚连

Jun 20, 2018 pm 03:59 PM

spavue

この記事では、主に Vue SPA の最初の画面読み込み最適化の実践を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

前に書いてあります

この記事では、著者が Vue SPA プロジェクトの最初の画面読み込み最適化プロセス中に遭遇した落とし穴と最適化ソリューションのいくつかを記録します。

SPA アプリケーションを構築するために vue-cli ツールを使用します。UI フレームワークとして element-ui、ajax ソリューションとして axios を選択し、vuex-router- を導入します。 sync を使用してルーターをストアに同期します。サーバーはローカルの Nginx サービスを使用します。

プロジェクトをビルドします

vue-init webpack vue-spa-starter-kit
cd vue-spa-starter-kit
npm install
npm install vuex element-ui axios -S
npm run dev

vue-cli によりブラウザが自動的に開き、効果を確認できます。エントリファイルに vue-router、element-ui、axios を導入します

// src/main.js
import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

次に、何も変更せず、デフォルト設定を使用してパッケージ化します。Nginx はデフォルト設定を使用し、Nginx にデプロイし、Nginx サービスを開始します。

ページや関数を開発せずに、vendor.js が 788kb であることがわかります。 echarts などの他のライブラリに依存すると、vendor.js は 1M を超える可能性があります。

CDN リソースを使用する

vue、vue-router、vuex、element-ui をベンダー.js から分離し、CDN リソースを使用してインポートする必要があります。国内の CDN サービスの場合は、BootCDN の使用をお勧めします。海外ではあまり役に立ちません。。。

まず、次の内容をテンプレートファイルindex.htmlに追加します:

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

build/webpack.base.conf.jsを変更します。外部設定項目の関連情報を参照してください。

module.exports = {
 ...
 externals: {
  &#39;vue&#39;: &#39;Vue&#39;,
  &#39;vuex&#39;: &#39;Vuex&#39;,
  &#39;vue-router&#39;: &#39;VueRouter&#39;,
  &#39;element-ui&#39;: &#39;ElementUI&#39;
 }
 ...
}

src/router/index.js を変更する

// import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
// 注释掉
// Vue.use(VueRouter)
...

src/store/index.js を変更する

...
// 注释掉
// Vue.use(Vuex)
...

src/main.js を変更する

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ELEMENT from &#39;element-ui&#39;
// import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

注意!ここでは、element-ui の umd モジュール名が ELEMENT であるため、element-ui 変数名には ELEMENT を使用する必要があります

それを再度パックして Nginx サービスにデプロイします。

vendor.js が次のように縮小されていることがわかります。 112kb、85.5%増加！

CDN リソースをもう一度見てください:

5 つのリクエストの合計は 216 kb で、619 ミリ秒かかったことがわかります。

Nginx は gzip をオンにします

vendor.js の最適化が完了しました。次に、サーバー上のリソースを最適化します。まず、gzip をオンにしない場合の影響を見てみましょう:

13.5kb を見ることができます

Nginx は gzip をオンにし、nginx 設定ファイル nginx.conf を変更します:

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 压缩级别
  # 要压缩的mine类型
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

nginx gzip については、関連情報を確認してください。自分で

nginx サービスを再起動し、その効果を確認してください:

gzip 圧縮後のサーバー上のリソースは 9 kb、圧縮率は 13.3% であることがわかります。

概要

この時点で、予備的な最適化が完了しました。実際のプロジェクトの最初の画面読み込み時間は、約 12 秒から約 4 秒に最適化されました。これはデモンストレーションプロジェクトであり、他のページや機能は開発されていないため、効果はあまり明らかではありません。自分で間違える可能性があります。誰もがより良い解決策を持っており、そこから一緒に学ぶことができます。

上記は私があなたのためにまとめたものです。

JavaScriptで自動数値インクリメントを実装する方法

ReactプロジェクトでReduxを使用する方法(詳細なチュートリアル)

ionic3でランダムレイアウトのウォーターフォールフローを実装する方法

JSでトップに戻る効果を実現する方法

JavaScript でコンテンツを追加する要素のスクロールバーループを実装する方法

以上がVue での SPA の最初の画面読み込みの最適化 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles