You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/global-api-treeshaking.md
+37-37Lines changed: 37 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -3,21 +3,21 @@ badges:
3
3
- breaking
4
4
---
5
5
6
-
# Global API Treeshaking <MigrationBadges:badges="$frontmatter.badges" />
6
+
# グローバル API の Treeshaking <MigrationBadges:badges="$frontmatter.badges" />
7
7
8
-
## 2.x Syntax
8
+
## 2.x での文法
9
9
10
-
If you’ve ever had to manually manipulate DOM in Vue, you might have come across this pattern:
10
+
手動で DOM 操作を行う必要があった場合に、このようなパターンを目にしたと思います:
11
11
12
12
```js
13
13
importVuefrom'vue'
14
14
15
15
Vue.nextTick(() => {
16
-
//something something DOM-related
16
+
// DOM に関連した処理
17
17
})
18
18
```
19
19
20
-
Or, if you’ve been unit-testing an application involving [async components](/guide/component-dynamic-async.html), chances are you’ve written something like this:
@@ -26,33 +26,33 @@ import { MyComponent } from './MyComponent.vue'
26
26
test('an async feature', async () => {
27
27
constwrapper=shallowMount(MyComponent)
28
28
29
-
//execute some DOM-related tasks
29
+
// DOM 関連の処理を実行
30
30
31
31
awaitwrapper.vm.$nextTick()
32
32
33
-
//run your assertions
33
+
//アサーションの実行
34
34
})
35
35
```
36
36
37
-
`Vue.nextTick()`is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()`is just a handy wrapper around `Vue.nextTick()`with the callback’s `this`context automatically bound to the current instance for convenience.
37
+
`Vue.nextTick()`は、個々の Vue オブジェクトに直接公開されるグローバルな API です - 実際に、インスタンスメソッドである `$nextTick()`は、まさに `Vue.nextTick()`を利便性のため `this`のコンテキストをそのインスタンスに自動的にバインドされたコールバックと共にラップしたものです。
38
38
39
-
But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()`instead? In such a case, the code for `nextTick()`will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
39
+
しかし、もし手動で DOM 操作を行う必要がなかったり、アプリケーション内で非同期コンポーネントを扱ったり、テストすることがない時はどうでしょうか？もしくは、どんな理由であれ、代わりに古き良き `window.setTimeout()`を使いたい時は？そのような場合に、`nextTick()`を使うコードはデッドコードになります。 - すなわち、書かれてあっても使われないということです。そして、とりわけファイルサイズが大切になるクライアント側においては、デッドコードは少なくともいいものではありません。
40
40
41
-
Module bundlers like [webpack](https://webpack.js.org/)support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for "dead code elimination." Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()`are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind. As a result, the global APIs can now only be accessed as named exports for the ES Modules build. For example, our previous snippets should now look like this:
45
+
Vue 3 では、グローバル API と内部 API は tree-shaking のサポートを念頭に置いて作り直されました。その結果、グローバル API は ES Modules ビルドの名前付きエクスポートとしてのみアクセスすることができます。例えば、以前のスニペットは次のようになります:
46
46
47
47
```js
48
48
import { nextTick } from'vue'
49
49
50
50
nextTick(() => {
51
-
//something something DOM-related
51
+
// DOM に関連した処理
52
52
})
53
53
```
54
54
55
-
and
55
+
そして
56
56
57
57
```js
58
58
import { shallowMount } from'@vue/test-utils'
@@ -62,40 +62,40 @@ import { nextTick } from 'vue'
62
62
test('an async feature', async () => {
63
63
constwrapper=shallowMount(MyComponent)
64
64
65
-
//execute some DOM-related tasks
65
+
// DOM 関連の処理を実行
66
66
67
67
awaitnextTick()
68
68
69
-
//run your assertions
69
+
//アサーションの実行
70
70
})
71
71
```
72
72
73
-
Calling `Vue.nextTick()`directly will now result in the infamous `undefined is not a function`error.
73
+
`Vue.nextTick()`を直接呼び出すと、忌まわしい `undefined is not a function`エラーになるでしょう。
74
74
75
-
With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
75
+
モジュールバンドラーが tree-shaking をサポートしているなら、この変更によって、Vue アプリケーション内で使用されていないグローバル API は最終成果物から削除され、最適なファイルサイズになります。
76
76
77
-
## Affected APIs
77
+
## 影響を受ける API
78
78
79
-
These global APIs in Vue 2.x are affected by this change:
79
+
この変更により、次の Vue 2.x のグローバル API が影響を受けます:
80
80
81
81
-`Vue.nextTick`
82
-
-`Vue.observable` (replaced by `Vue.reactive`)
82
+
-`Vue.observable` (`Vue.reactive` に置き換えられます)
83
83
-`Vue.version`
84
-
-`Vue.compile` (only in full builds)
85
-
-`Vue.set` (only in compat builds)
86
-
-`Vue.delete` (only in compat builds)
84
+
-`Vue.compile` (完全ビルドのみ)
85
+
-`Vue.set` (互換ビルドのみ)
86
+
-`Vue.delete` (互換ビルドのみ)
87
87
88
-
## Internal Helpers
88
+
## 内部ヘルパー
89
89
90
-
In addition to public APIs, many of the internal components/helpers are now exported as named exports as well. This allows the compiler to output code that only imports features when they are used. For example the following template:
90
+
公開 API に加え、多くの内部コンポーネントや内部ヘルパーも同様に、名前付きエクスポートされるようになります。これにより、コンパイラは機能が使われたときにのみインポートするコードを生成できるようになります。例えば、次のテンプレートは:
91
91
92
92
```html
93
93
<transition>
94
94
<divv-show="ok">hello</div>
95
95
</transition>
96
96
```
97
97
98
-
is compiled into something similar to the following:
This essentially means the `Transition`component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>`component, the code supporting this feature will not be present in the final bundle.
With global tree-shaking, the user only "pay" for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
The above only applies to the [ES Modules builds](/guide/installation.html#explanation-of-different-builds)for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
If your plugin relies on an affected Vue 2.x global API, for instance:
118
+
例えば、もし影響を受ける Vue 2.x のグローバル API にプラグインが依存していた場合:
119
119
120
120
```js
121
121
constplugin= {
@@ -127,7 +127,7 @@ const plugin = {
127
127
}
128
128
```
129
129
130
-
In Vue 3, you’ll have to import it explicitly:
130
+
Vue 3 では、明示的にインポートしなければいけません:
131
131
132
132
```js
133
133
import { nextTick } from'vue'
@@ -141,7 +141,7 @@ const plugin = {
141
141
}
142
142
```
143
143
144
-
If you use a module bundle like webpack, this may cause Vue’s source code to be bundled into the plugin, and more often than not that’s not what you'd expect. A common practice to prevent this from happening is to configure the module bundler to exclude Vue from the final bundle. In webpack's case, you can use the [`externals`](https://webpack.js.org/configuration/externals/)configuration option:
If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a ["Treating vue as external dependency"](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency)warning, which can be suppressed with the `external`option:
0 commit comments