blob: faa0dd5af4b55d8c02aefe7aa8a4ad5cdebb572a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
---
title: Tree shaking
slug: Glossary/Tree_shaking
translation_of: Glossary/Tree_shaking
---
<p><strong>Tree shaking</strong> とは実行されないコードを削除することで、JavaScriptの文脈で利用される用語です。</p>
<p>Tree shaking は ES2015 の <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a> 文と <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a> 文を利用して、エキスポートされたコードが他の JavaScript ファイルで利用されているかどうかを判定します。</p>
<p>モダンな JavaScript アプリケーションの開発では、<a href="https://webpack.js.org/">webpack</a> や <a href="https://github.com/rollup/rollup">Rollup</a> のようなモジュールバンドラーが複数の JavaScript ファイルを 1 つにまとめられます。この際に tree shaking が行われます。Tree shaking は、コードの構造を整理してファイルサイズを小さくできる、といった点で製品としてリリースする前の重要な処理となっています。</p>
<h2 id="詳細情報">詳細情報</h2>
<h4 id="一般的な知識">一般的な知識</h4>
<ul>
<li><a href="http://exploringjs.com/es6/ch_modules.html#_benefit-dead-code-elimination-during-bundling">"Benefits of dead code elimination during bundling"</a> in Axel Rauschmayer's book: "Exploring JS: Modules"</li>
</ul>
<h4 id="技術的なレファレンス">技術的なレファレンス</h4>
<ul>
<li><a href="https://webpack.js.org/guides/tree-shaking/">Tree shaking implementation with webpack</a></li>
</ul>
|
