Vueの不完全な極致最適化

2091 ワード
vue.js
Vueの不完全な極致最適化
もし私たちのプロジェクトが足場で構築されていたら、ほとんどの最適化足場が手伝ってくれました.例えば、画像転送base 64、コード圧縮などである.
今日お話ししたいのは、自分で最適化する場所です.
  • サードパーティオンデマンドロード、たとえばElementオンデマンドロード、どのコンポーネントを使用してどのコンポーネントを導入するか.
    // main.js
import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
//    
  Vue.use(Button)
  Vue.use(Select)
  • CDN導入:一部のファイルまたはサードパーティのライブラリをCDN方式で導入できます.例えば、Vue、VueX、VueRouterなどである.index.htmlファイルにscriptラベルでCDNを導入し、最後にWebpackに配置し、パッケージ化する際にCDNで導入したファイルやサードパーティライブラリをパッケージ化しないでください.
    // webpack  
externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter'
  },
  • ルーティング怠け者
    // webpackChunkName        ，            
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '/baz', component: Baz },
  ]
})
  • 非同期コンポーネント
    new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})
  • は、Watch、computedをできるだけ少なく、かつ合理的に使用する.例えば、オブジェクトの中のkeyの変化を傍受したいだけで、オブジェクト全体を傍受する必要はありません.これは依存する数を増やし、オーバーヘッドを増やすからです.
  • Object.freeze()フリーズは表示するデータだけで、Vueはデータを応答式に変換せず、依存する数を減らし、性能を向上させる.
  • サーバレンダリングまたはプリレンダリング.この記事:Vue SSRガイドを参照してください.
  • ページが複雑すぎる場合、モジュールをコンポーネントに分割することができ、モジュールに必要な機能は、コンポーネント内部で実現され、非同期コンポーネントと完璧に協力して使用することができる.
  • コンポーネントのcssを個別のファイルにアンインストールし、コンポーネントに導入します.コンポーネント内のCSSは、JavaScriptを介して
    • [アイテム5]リソースを直接指定するのではなく、依存オブジェクト注入を使用する
    ソフトウェアジャングル週間16