From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 12 Aug 2018 17:28:02 +0000 (+0200)
Subject: docs: add "Tree Shaking" section in javascript documentation
X-Git-Tag: v6.6.0~3^2~100^2~6
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7326c38fd;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: add "Tree Shaking" section in javascript documentation
---

diff --git a/docs/pages/javascript.md b/docs/pages/javascript.md
index 0f1e1fe4e..16dddae7d 100644
--- a/docs/pages/javascript.md
+++ b/docs/pages/javascript.md
@@ -63,6 +63,19 @@ var Foundation = require('foundation-sites');
 var $dropdown = new Dropdown('#mydropdown');
 ```
 
+#### Tree Shaking
+
+Many bundlers like Webpack, Rollup or Parcel support tree shaking. It consists of the removing the unused code parts from your codebase or your dependencies. Take a look at these articles to know how it works and how to enable it: [How To Clean Up Your JavaScript Build With Tree Shaking](https://www.engineyard.com/blog/tree-shaking), [Why Webpack 2's Tree Shaking is not as effective as you think](https://advancedweb.hu/2017/02/07/treeshaking/) and [Reduce JavaScript Payloads with Tree Shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/).
+
+Sadly, the "static analysis" promised by these bundlers to detect unused code in dependencies does not usually work, so we recommend you to manually import the Foundation plugins instead, like the following:
+
+```js 
+import Dropdown from 'foundation-sites/js/foundation.dropdown';
+import DropdownMenu from 'foundation-sites/js/foundation.dropdownMenu';
+```
+
+Tree Shaking is only available in ES6.
+
 ---
 
 ## Initializing