Vue の最初の画面読み込み時間を最適化する方法

php中世界最好的语言
リリース: 2018-04-08 15:48:04
オリジナル
2482 人が閲覧しました

今回は、vue が最初の画面の読み込み時間を最適化する方法について説明します。vue が最初の画面の読み込み時間を最適化するために使用できる 注意事項 は何ですか。実際のケースを見てみましょう。私の最近のインターンシップのプロジェクト要件

には多くの要件がなかったので、プロジェクトの最適化について学びました。主な理由は、最初の画面の読み込みが遅すぎることでした。

大きなファイルの検索

Webpack 視覚化プラグイン Webpack Bundle Analyzer を使用して、プロジェクトの js ファイル サイズを表示し、大きすぎる js ファイルを意図的に解決できます。

Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。

安装

npm install --save-dev webpack-bundle-analyzer
ログイン後にコピー

在webpack中设置如下,然后npm run dev webpack で

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 plugins: [
  new BundleAnalyzerPlugin()
 ]
}
ログイン後にコピー
を次のように設定してインストールし、npm run dev は、デフォルトではポート 8888 に表示されます。

import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数,就打包到该`/JS/index` 的文件中。
//不写第二个参数,就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))
ログイン後にコピー

JS ファイルはオンデマンドで読み込まれます

この設定をしないと、プロジェクトの最初の画面を読み込むときに Web サイト全体のすべての JS ファイルが読み込まれるため、JS ファイルを分離してページを読み込むときに、特定のページをクリックすると、JS は優れた最適化方法です。 ここで使用されているのは、vue コンポーネントの遅延読み込みです。 router.js では、コンポーネントの導入に import メソッドを使用せず、require.ensure を使用します。

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}
ログイン後にコピー

パッケージングにcdn

を使用する場合は、vue、vuex、vue-router、axios等を国産bootcdnに置き換えて、ルートディレクトリのindex.htmlに直接導入してください。

Webpack設定に外部を追加し、パッケージ化する必要のないライブラリを無視します。

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
ログイン後にコピー
cdnを使用してindex.htmlにインポートします。

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})
ログイン後にコピー

JSファイルをbodyの最後に配置します

デフォルトでは、ビルド後のindex.htmlでは、

headerにjsが導入されています。 html-webpack-plugin プラグインを使用して、inject の値を body に変更します。 jsの紹介文を本文の最後に置くことができます。

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})
ログイン後にコピー

コードを圧縮してコンソールを削除

UglifyJsPlugin プラグインを使用してコードを圧縮し、コンソールを削除します。

rrreeeこの記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:

Angularの親コンポーネントが子コンポーネントを呼び出す方法

JSON形式でデータをサーバーに送信する方法

🎜🎜WeChatアプレットブロックの使用方法🎜🎜🎜

以上がVue の最初の画面読み込み時間を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!