Vue SPA シングルページ アプリケーションのホーム画面最適化の概要

この記事では、Vue SPA シングルページ アプリケーションの最初の画面最適化の実践を主に紹介します。内容が非常に優れているので、参考として共有します。

1. コード圧縮 (gzip)

nginx サーバーを使用している場合は、設定ファイルを変更してください (他の Web サーバーも同様です): sudo nano /etc/nginx/nginx.conf sudo nano /etc/nginx/nginx.conf

在Gzip Settings里加入：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

• gzip

• 开启或者关闭 gzip 模块，这里使用 on 表示启动

• gzip_min_length

• 设置允许压缩的页面最小字节数．默认值是0，不管页面多大都压缩．

• gzip_buffers

• 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流．4 16k 代表以 16k 为单位，按照原始数据大小以 16k 为单位的4倍申请内存

• gzip_comp_level

• 压缩比，压缩比１最小处理速度最快，压缩比9最大但处理最慢（传输快但比较消耗cpu）

• gzip_types

• 匹配MIME类型进行压缩，（无论是否指定）"text/html" 类型总是会被压缩

我这样配置，把首页一个需要下载的文件由716KB压缩到了246KB．优化比66%．

如果你没有开启服务器端的gzip，也可以开启前后端代码的压缩

如果你后端用的是Express.js框架来提供Web服务，那么可以使用压缩中间件进行gzip压缩．

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

如果你前端是用vue-cli生成的项目，那么在Webpack配置文件（生产环境）中已经开启了代码的压缩．

２. 外部文件按需引入||不用外部文件，自己造轮子

在项目中使用Element的话，按需引入：

首先安装 babel-plugin-component：

npm install babel-plugin-component -D

它让我们可以只引入需要的组件，以达到减小项目体积的目的.

PS: 如果这时报错：

Error: post install error, please remove node_modules before retry

这是cnpm的锅．原因不详．解决办法是换用npm安装此模块．(我试过移除node_modules文件，报错依旧)

如果你用了Ajax相关的库，比如vue-resource/axios的话

去掉它，自己实现一个Ajax库吧．

比如我的项目中只涉及了get,post，那么vue-resource/axios对我来说就很没必要了．

所以我就封装个库（支持Promise,不支持IE）在Vue中当作插件使用：

/* xhr.js */
class XHR {
 get(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      if (xhr.responseText) {
       resolve(JSON.parse(xhr.responseText));
      } else {
       resolve(xhr.responseText);
      }
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;get&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(null);
  });
 }

 post(url, data) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
     if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
      resolve(JSON.parse(xhr.responseText));
     } else {
      reject(`XHR unsuccessful:${xhr.status}`);
     }
    }
   };
   xhr.open(&#39;post&#39;, url, true);
   xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/json&#39;);
   xhr.send(JSON.stringify(data));
  });
 }
}

/* Vue插件要求提供install方法：https://cn.vuejs.org/v2/guide/plugins.html */
XHR.install = (Vue) => {
 Vue.prototype.$get = new XHR().get;
 Vue.prototype.$post = new XHR().post;
};

export default XHR;

这种方法一般能缩小文件几十KB．比如vue-resource有35KB,我的这个xhr.js只有1.9KB．

3．代码分块/Code Splitting

顾名思义，就是讲代码分成块，按需加载．这样，如果首屏不需要的块，就不用加载了．

对于大型项目可能更有用，因为在我的这个项目中首页需要的文件和其他页面需要的基本一样，所以代码分块对我这个项目而言，就没必要了．

4. 路由组件懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

结合 Vue 的异步组件 和 Webpack 的 code splitting feature,可以轻松实现路由组件的懒加载．

我们要做的就是把路由对应的组件定义成异步组件：

const Foo = resolve => {
 /* require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
 （代码分块）*/
 require.ensure(['./Foo.vue'], () => {
 resolve(require('./Foo.vue'))
 })
}
/* 另一种写法 */
const Foo = resolve => require(['./Foo.vue'], resolve);

不需要改变任何路由配置，跟之前一样使用 Foo：

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-shaking

Tree-shaking

Gzip 設定を追加:

rrreee

• gzip

• gzip モジュールを有効または無効にします。ここでは有効化を示すために on を使用します
• 
  gzip_min_length

• 圧縮が許可されるページの最小バイト数を設定します。デフォルト値は 0 で、サイズに関係なくページを圧縮します。

• gzip_buffers

• システム取得の設定gzip 圧縮された結果データ ストリームを保存するために、いくつかのキャッシュ ユニットが使用されます。 4 16k は、16k 単位でメモリを申請し、16k 単位で元のデータ サイズの 4 倍を申請することを意味します
  
• gzip_comp_level

• 圧縮率、最小圧縮率 1 が最も速く、圧縮率 9 は最大ですが処理が最も遅くなります (転送は速いですが、より多くの CPU を消費します) )

• gzip_types
• 
  MIME に一致する圧縮用のタイプ (指定されているかどうかに関係なく) "text/html" タイプは常に圧縮されます

このように設定し、圧縮する必要があるファイルを圧縮しましたホームページからダウンロードできるサイズは 716KB から 246KB です。最適化率66%。

サーバー側で gzip を有効にしない場合は、フロントエンド コードとバックエンド コードの圧縮を有効にすることもできます。🎜🎜🎜バックエンドで Express.js フレームワークを使用して Web サービスを提供する場合は、 gzip圧縮には圧縮ミドルウェアを使用できます。 🎜rrreee🎜 フロントエンド プロジェクトが vue-cli で生成されている場合、Webpack 構成ファイル (運用環境) でコード圧縮が有効になっています。 🎜🎜🎜２. オンデマンドで外部ファイルをインポート||外部ファイルを使用せずに独自のホイールを発明します🎜🎜🎜🎜プロジェクトで Element を使用する場合は、オンデマンドでインポートします: 🎜🎜最初に babel-plugin をインストールします。 -component :🎜rrreee🎜これにより、プロジェクトのサイズを削減するために必要なコンポーネントのみを導入できます。🎜🎜PS: この時点でエラーが報告された場合:🎜

🎜エラー: インストール後のエラー、削除してください再試行前のノードモジュール🎜🎜

🎜 これは cnpm のせいです。理由は不明です。解決策は、npm を使用してこのモジュールをインストールすることです。 (node_modulesファイルを削除してみましたが、エラーは残りました) 🎜🎜🎜vue-resource/axiosなどのAjax関連ライブラリを使用している場合🎜🎜🎜それを削除し、自分でAjaxライブラリを実装してください。 🎜🎜たとえば、私のプロジェクトには get, post のみが含まれるため、vue-resource/axios は私にとっては非常に不要です。 🎜🎜そこで、ライブラリ (Promise をサポートしますが、IE はサポートしません) をカプセル化し、それを Vue のプラグインとして使用します。 🎜rrreee🎜 この方法では、通常、ファイル サイズを数十 KB 削減できます。たとえば、vue-resource は 35 KB ですが、xhr.js はわずか 1.9 KB です。 🎜🎜🎜3.コード分​​割/Code Splitting🎜🎜🎜🎜その名のとおり、コードをチャンクに分割し、オンデマンドでロードすることを意味します。このように、最初の画面に不要なブロックがある場合、それらをロードする必要はありません。 🎜🎜私のプロジェクトではホームページに必要なファイルは他のページに必要なファイルと基本的に同じであるため、大規模なプロジェクトではより便利かもしれません。そのため、私のプロジェクトではコードブロッキングは必要ありません。 🎜🎜🎜4. ルーティングコンポーネントの遅延読み込み🎜🎜🎜🎜アプリケーションをパッケージ化してビルドすると、JavaScript パッケージが非常に大きくなり、ページの読み込みに影響します。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、Vue の非同期コンポーネントと Webpack のコード分割機能を組み合わせることで、より効率的に遅延ローディングを簡単に実装できます。ルーティングコンポーネントの。 🎜🎜私たちがしなければならないことは、ルートに対応するコンポーネントを非同期コンポーネントとして定義することです: 🎜rrreee🎜 ルーティング設定を変更する必要はなく、以前と同様に Foo を使用します: 🎜rrreee🎜🎜4. Webpack2 Tree-shaking🎜🎜🎜 🎜 Tree-shaking は、未使用のコードを削除するために使用されます。 🎜🎜 小規模な個人プロジェクトの場合、通常、ツリーシェイクは必要ありません。使われないコードは書かないからです。大規模なプロジェクトではそれを使用しようとするかもしれません。 🎜🎜🎜5. XHR 内の不要なデータを削減します。 🎜🎜🎜🎜たとえば、私のプロジェクトでは、ホームページに必要なのはブログのタイトル、ID、タグのみです。時間もコンテンツも必要なくなり、コンテンツは通常非常に大きくなります (通常、記事ごとに約 10KB)。 🎜🎜🎜6. SSR (Server Side Render/サーバーサイドレンダリング)🎜🎜🎜🎜これは少し難しいです。でも効果はかなり良いようです。以前に Vue ドキュメントを簡単に見て、将来必要になったら実行する予定でした。 🎜🎜🎜7. 画像の遅延読み込みなどのその他のことについては詳しく説明しませんが、これらはフロントエンド開発者が知っておくべき常識です。 🎜🎜🎜🎜上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連するおすすめ: 🎜

vueのトランジションを使用してスライドトランジションを完了する方法

Vueでの$refsの使用方法

vueプロジェクトにMint-UIをインストールする方法

以上がVue SPA シングルページ アプリケーションのホーム画面最適化の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。