docs: add "Tree Shaking" section in javascript documentation

diff --git a/docs/pages/javascript.md b/docs/pages/javascript.md
index 0f1e1fe4e70c7406ed5ecd8a4fbede9854916f26..16dddae7d44b55a8747ccfbaf0cb57e2e9c04e95 100644 (file)
--- 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