低速のパフォーマンス最適化のVUE単一ページのアプリケーションが最初にロード

問題の説明：

ページの初期ロードは、ユーザーエクスペリエンスに影響を与えるされ、完了するために、ライン20代を見つけ、その原因を分析し、ページの負荷を見つけるために、後に最近開発された1ページのアプリケーションがあり、

vendor.js以上3000キロバイトに達したので、私は詰まったときに、すべてのサードパーティが依存しているが中に包装されているので、その理由を見つけるためにインターネットを行ってきました。それを分離する方法、

次の手順を参照してください。

 

ページが最初に極端に遅いロードされた後まず、ライン上のvendor.jsパッケージ偉大な原因を解決します：

VUEは、CLI NPM問題最初の画面の外観をロードすることが遅すぎる、大きすぎるvendor.jsファイルで、その結果、依存関係に統一されたコマンドのデフォルトのパッケージの依存関係を構築し実行します。

解決策：サードパーティ製のリソースへの使用外観の参照、要素のリソースを防ぐためには、自分のプロジェクトにパックされている、（3改質部のindex.htmlを、webpack.base.conf.js、main.jsの合計）

 

1、頭の中でCDN上のリソースの導入をindex.htmlページを変更します。

<！ - CDNのリソースを適切に導入することができます - >

<スクリプトSRC = "https://cdn.bootcss.com/vue/2.5.16/vue.min.js"> </ SCRIPT> 
<スクリプトSRC = "https://cdn.bootcss.com/vue-router /3.0.1/vue-router.min.js "> </ SCRIPT> 
<スクリプトSRC =" https://cdn.bootcss.com/element-ui/2.4.0/index.js "> </ SCRIPT> 
<スクリプトSRC = "https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"> </ SCRIPT>

 

注：上記のああ自分のホールドをお返しするために安全上の理由から問題があるいつかあれば、私たちのプロジェクトが麻痺したので、直接再CDN、CDNサーバの導入で、

採用した、次のように上記文書の導入が失敗した後、別のアドレスから導入され、もちろんあなたは、ローカルにも代替アドレスをすることができ、私がここに持っているCDNサーバーの別の場所です、

同時に2つのサーバーはそれを失敗しないはずです！...

<！ -引入CDN资源- > 
<スクリプトSRC = "https://cdn.bootcss.com/vue/2.5.16/vue.min.js"> </ SCRIPT> 
<SCRIPT> 
　　// <！ CDATA [ 
　　場合（typeof演算ヴュー== ' 不定' ）{にdocument.write（アンエスケープ（" ％3Cscript SRC = 'HTTPS：//cdn.staticfile.org/vue/2.6.10/vue.min.js' ％3E％ 3C /スクリプト％の3E " ））; } //]]> </ SCRIPT> <スクリプトSRC = "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"> </ SCRIPT> <SCRIPT> / / <！[CDATA [場合（typeof演算VueRouter == ' 未定義' ）{document.writeを（アンエスケープ（"％3Cscript SRC = 'HTTPS：//cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' ％3E％3C /スクリプト％の3E " ））;} //]]> < /スクリプト> <スクリプトSRC = "https://cdn.bootcss.com/element-ui/2.4.0/index.js"> </ SCRIPT> <SCRIPT> // <！[CDATA [場合（typeof演算ELEMENT = = ' 不定' ）{にdocument.write（アンエスケープ（" ％3Cscript SRC = 'HTTPS：//cdn.staticfile.org/element-ui/2.10.1/index.js' ％3E％3C /スクリプト％の3E " ） ）;} //]]> </ SCRIPT> <SCRIPT SRC = "https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"> </ SCRIPT> <SCRIPT> // < ！[CDATA [場合（typeof演算echarts == "未定義' ）{にdocument.write（エスケープ解除（"％3Cscript SRC = 'HTTPS：//cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js' ％3E％3C /スクリプト％の3E " ））;} //]]> < /スクリプト>

 

 

2、webpack.base.conf.jsファイルを変更します。外観の設定を追加します

外観：{ 

　　'ショック'： 'サイト' 、

　　'衝撃ルータ'： 'VueRouter' 、

　　'要素-UI'： '要素' 、
 　　"echarts"： "echarts" 、
 }、

 

3にmain.jsから対応するインポートを削除します。そこにこれらの2つのファイルを再生するときに削除されていない場合ので、パックされます。

 

最後にパックし、唯一の300キロバイトvendor.jsいます。上の行の後すぐにページが最初にロードされる見つけます。

 

以下は、いくつかの他の最適化を追加します。

1、ルート遅延ロードを実行する必要があります。

パッケージには、アプリケーションを構築する場合には、Javascriptのパッケージには、ページのロードに影響を与える、非常に大きくなります。我々はルート別のコードに対応するさまざまなコンポーネントをブロックに分割することができた場合は、

ルートは、その後、アクセス対応する構成要素になるまでロードされたときので、より効率的。VUEの結合非同期成分およびWebPACKの符号分割機能、

轻松实现路由组件的懒加载。具体实现方法官网和网上有很多例子，这里就不详细讲解了。

 

 

3、本地图片与请求的后台图片的大小：

在我这个项目中有很多图片，最开始没太在意图片的大小，导致上线后很多大的图片加载很慢，于是我把图片做了压缩处理；推荐个网站：

http://www.bejson.com/ui/compress_img/（压缩图片不失帧）；

当然我们也可以使用webpack里的插件对打包的图片进行压缩，也可以使用gulp.js里的插件对图片进行压缩。具体自己去百度吧...

 

4、打包后app.css过大：

我们可以把app.css做拆分，可以利用 webpack 中的 dll 做一部分的分割，比如第三方等的公用 css 文件。

然后再者可以利用 mini-css-extract-plugin 这个插件做各自模块的 css 文件提取（如果用的是webpack4）,

webpack3 的化可以用 extract-text-webpack-plugin。