From 7326c38fd3f08fba15693faeaa0d774a03935354 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 12 Aug 2018 19:28:02 +0200 Subject: [PATCH] docs: add "Tree Shaking" section in javascript documentation --- docs/pages/javascript.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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 -- 2.47.2