Vue プロジェクトを最適化する方法

数日前、Vue プロジェクトが大きくなるほど最適化が難しくなり、多くの苦痛が生じると言っているのを見かけましたが、これは最終的には解決されるべき問題であり、パフォーマンスには問題ありません。すべての主要なテスト Web サイトには関連データがあります。本題に入りましょう

基本的な最適化

いわゆる基本的な最適化は、あらゆる Web プロジェクトに必要であり、問​​題の根本です。 HTML、CSS、および JS は、それぞれ .vue ファイル内の最適化のポイントに対応します。

<template>,<style>,<script>

，下面逐个谈下 vue 项目里都有哪些值得优化的点

template

语义化标签，避免乱嵌套，合理命名属性等等标准推荐的东西就不谈了。

模板部分帮助我们展示结构化数据，vue 通过数据驱动视图，主要注意一下几点

• v-show，v-if 用哪个？在我来看要分两个维度去思考问题，第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if

  const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
  const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
  const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

  v-if
では、vue プロジェクトで最適化する必要があるポイントについて 1 つずつ説明します。 1 つ


• テンプレート

  セマンティック タグ、ランダムなネストの回避、属性の合理的な命名、およびその他の標準的な推奨事項については説明しません。 テンプレート パーツは構造化データの表示に役立ちます。Vue は次の点に注意してください。

  🎜🎜v-show、v-if どれを使用しますか?私の考えでは、問題は 2 つの次元で考える必要があります。1 つ目の次元は、パーミッション関連の表示が関係する限り、間違いなくユーザーの頻度に基づいて選択されることになります。頻繁な切り替え 🎜 v-show🎜 の使用、低頻度の切り替え 🎜 の使用、ここで言及する最適化ポイントは、ページ内のページ数を減らすことです。 DOM の総数については、DOM の数が減り、最初の画面のレンダリングが高速化されるため、🎜 を使用することを好みます。パフォーマンスに関しては、レンダリングの切り替えプロセスが目に見えないように感じます。ユーザーエクスペリエンスには影響しません。 🎜🎜🎜🎜テンプレートに表現や判断を書きすぎないでください 🎜v-if="isShow && isAdmin && (a || b)"🎜、この式は認識できますが、長期的な解決策ではありません。不快に見える場合は、適切にメソッドに記述し、計算してメソッドにカプセル化します。これは、複数の場所で同じ式を判定するのに便利であり、同じ権限を持つ他の要素が判定および表示するときに同じメソッドを呼び出すことができます🎜。

• ループ内でサブコンポーネントを呼び出すときにキーを追加します。キーはループを個別に識別できます。たとえば、item.id を次のように使用できます。 key、配列データが次のような場合 ['a' , 'b', 'c', 'a'],使用 :key="item" より良い方法はループすることです (item, Index) を arr に追加し、次に :key="index":key="index"

  を使用してキーの一意性を確保します。

style

• スタイル ファイルを vue ファイルの内側または外側に置きますか?議論しても意味がありません。重要なのは、vue ファイル内にコードを記述して、内部または外部の提案に関係なく追加することです。 .header-title__text スタイルファイルをロックする目的は非常に単純です。どんなに使いやすい標準であっても、合意された名前付けルールが競合する可能性は避けられません。短い命名規則を使用するため、 .title.header -title__text

  などは必要ありません。 クラス、直接
.title
• 。

• 前の記事と区別するために、グローバル スタイル ファイルについて説明します。グローバル スタイル ファイルは、すべてのコンポーネントで繰り返されるものではないため、できるだけ一般的なものにする必要があります。この部分の抽象化が優れているほど、スタイル ファイルのサイズが小さくなり、再利用率が高くなります。コピーしたElement styleなどのコンポーネントライブラリのコードをグローバルに入れることを推奨します。

  .clear，现在的浏览器还不至于弱到非要用 floatfloat レイアウトは使用しないでください。以前に多くの人がそれをカプセル化しているのを見てきました

  .fl -- float: left
グローバル ファイルに移動し、次に

.clear

を実行します。今日のブラウザは、互換性のために

float

を使用する必要があるほど弱くはありません。 実際、Flex と Grid の互換性は平均的であり、Float レイアウトでも機能を実装できますが、これを使用したことがある人なら、この説明がわかりにくいとは思わないでしょう。

🎜その他の一般的な仕様については、ここでは詳しく説明しません。関連記事がたくさんあります。 🎜🎜script🎜🎜 この部分は最適化するのが最も難しい部分でもあります。私の個人的な意見を言わせてください。 🎜

• 複数人で開発する場合は、対応するメソッドを見つけやすくするために、各コンポーネント内のメソッドの順序を一貫して保つようにしてください export default {}。私の個人的な習慣 データ、プロップ、フック、ウォッチ、計算済み、コンポーネント。

• データで言いたいのは、初期化されたデータの構造はできるだけ詳細で、明確な名前が付けられ、シンプルで理解しやすく、無駄な変数を避ける必要があるということです。 isEditing は実際には true または 2 つの状態を表すことができます。 false。表示を制御するために notEditing を定義しないでください。テンプレート内で実行できます {{ isEditing ? 編集中: 保存}}

• props 親コンポーネントと子コンポーネントに値を渡すときは、:width="" :heigth="" 不要 :option={}:width="" :heigth=""

  しないようにしてください。改良の利点は、サブコンポーネント内で、渡す必要のある変更のみがパラメータとして渡されることです。 データ型、渡す必要があるかどうか、およびデフォルト値を props に追加して、エラーのトラブルシューティングを容易にし、値の送信をより厳密にします。

• フックは、ライフサイクルの意味、いつリクエストされるべきか、いつメソッドをログアウトすべきか、どのメソッドをログアウトする必要があるかを理解する必要があるだけです。シンプルでわかりやすく、公式サイトに書かれています。

• メソッドの各メソッドはシンプルでなければならず、パラメータが多すぎない短くて再利用可能なメソッドをカプセル化するようにしてください。開発に lodash に大きく依存している場合、メソッドははるかに単純に見えますが、プロジェクトで少数のメソッドのみが使用されている場合は、loadsh をローカルに導入できます。 lodash を使用したい場合は、util.js ファイルを自分でカプセル化できます

• どちらを使用するかについては、計算された属性は主にフィルター変換のレイヤーを参照してください。いくつかの呼び出しメソッドを追加しないでください。watch の機能は、データの変更を監視したり、this.$store などのイベントをトリガーしたりすることです。 { ... })

コンポーネントの最適化

vue のコンポーネント化は、プロジェクトの規模によって異なりますが、少数のコンポーネントだけで完了することもできます。 vuex、axios などは必要ありません。規模が大きい場合は、レイアウトのカプセル化、ボタン、フォーム、プロンプト ボックス、カルーセルなどを含むコンポーネントを細分化する必要があります。このような詳細については、Element ライブラリを直接使用して、いくつかの点で最適化することができます。コンポーネントには明確な意味があり、同様のビジネスのみを処理します。再利用性が高いほど優れており、構成可能性が強いほど優れています。

• コンポーネントを自分でカプセル化するか、props 改良を構成するルールに従うか。

• コンポーネントの分類は、ページ、ページアイテム、レイアウトの3つのカテゴリに分けられます。ページは、バナー、サイドなどのページ内の各レイアウトブロックに属するページです。アイコン、scrollTop など、複数のページに少なくとも 2 回表示されるコンポーネント。

• vue-router と vuex の最適化

vue-router ルートの切り替えに加えて、最も一般的に使用されます。ロジックはアクセス許可を処理するためのものであり、ここではアクセス許可を制御することはできません。最適化に関して言えば、言及する価値があるのはコンポーネントの遅延読み込みです。

中午官网链接如上，例子如下

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

这段代码将 Foo, Bar, Baz 三个组件打包进了名为 group-foo 的 chunk 文件，当然啦是 js 文件

其余部分正常写就可以，在网站加载时会自动解析需要加载哪个 chunk，虽然分别打包的总体积会变大，但是单看请求首屏速度的话，快了好多。

vuex 面临的问题和解决方案有几点

• 当网站足够大时，一个状态树下，根的部分字段繁多，解决这个问题就要模块化 vuex，官网提供了模块化方案，允许我们在初始化 vuex 的时候配置 modules。每一个 module 里面又分别包含 state 、action 等，看似是多个状态树，其实还是基于 rootState 的子树。细分后整个 state 结构就清晰了，管理起来也方便许多。

• 由于 vuex 的灵活性，带来了编码不统一的情况，完整的闭环是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed，实际上中间的环节有的可以省略，因为 API 文档提供了以下几个方法 mapState、mapGetters、mapActions、mapMutations，然后在组件里可以直接调取任何一步，还是项目小想怎么调用都可以，项目大的时候，就要考虑 vuex 使用的统一性，我的建议是不论多简单的流程都跑完整个闭环，形成代码的统一，方便后期管理，在我的组件里只允许出现 dispatch 和 mapGetters，其余的流程都在名为 store 的 vuex 文件夹里进行。

• 基于上面一条，说下每个过程里面要做什么，前后端数据一定会有不一致的地方，或是数据结构，或是字段命名，那么究竟应该在哪一步处理数据转换的逻辑呢？有人会说其实哪一步都可以实现，其实不然，我的建议如下

1. 在发 dispatch 之前就处理好组件内需要传的参数的数据结构和字段名

2. 到了 action 允许我们做的事情很多，因为这部支持异步，支持 state, rootState, commit, dispatch, getters，由此可见责任重大，首先如果后端需要部分其他 module 里面的数据，要通过 rootState 取值再整合到原有数据上，下一步发出请求,建议（async await + axios），拿到数据后进行筛选转换，再发送 commit 到 mutation

3. 这一步是将转换后的数据更新到 state 里，可能会有数据分发的过程（传进一个 object 改变多个 state 中 key 的 value），可以转换数据结构，但是尽量不做字段转换，在上一步做

4. 此时的 store 已经更新，使用 getter 方法来取值，token: state => state.token，单单的取值，尽量不要做数据转换，需要转换的点在于多个地方用相同的字段，但是结构不同的情况（很少出现）。

5. 在组件里用 mapGetters 拿到对应的 getter 值。

打包优化

上面说了代码方面的规范和优化，下面说下重点的打包优化，前段时间打包的 vender bundle 足足 1.4M，app bundle 也有 270K，app bundle 可以通过组件懒加载解决，vender 包该怎么解决？

有人会质疑是不是没压缩或依赖包没去重，其实都做了就是看到的 1.4M。

解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

例如：

fe1955b5a271a2d2ad9da0c29e9600282cacc6d41bbb37262a98f745aa00fbf0
a3f2dbbc8c9775a0a77b6bb3360b57052cacc6d41bbb37262a98f745aa00fbf0
948c393b837f3e71dfeb3d56f8ffbd1c2cacc6d41bbb37262a98f745aa00fbf0
a2410c7c1519f1c8646b704e836e26742cacc6d41bbb37262a98f745aa00fbf0

在 webpack 里有个 externals，可以忽略不需要打包的库

externals: {  
    'vue': 'Vue',  
    'vue-router': 'VueRouter',  
    'vuex': 'Vuex',  
    'axios': 'axios'
}

此时的 vender 包会非常小，如果不够小还可以拆分其他的库，此时增加了请求的数量，但是远比加载一个 1.4M 的 bundle 快的多。

以上がVue プロジェクトを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。