Wk-notes-01-17-bundling-browser-module-treeshake-2

How to use browser js module

No bundling and shit !!

htm https://github.com/developit/htm

<!DOCTYPE html>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(todo => html`
                <li>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
      }
    }

    const Header = ({ name }) => html`<h1>${name} List</h1>`

    const Footer = props => html`<footer ...${props} />`

    render(html`<${App} page="All" />`, document.body);
  </script>
</html>

Separate Bundling builds

Purpose : To support various consumers including modern browser

Example: https://unpkg.com/browse/preact@10.2.1/dist/

Enable Modern Javascript from npm

Question: how does webpack(npm) consume the pkg

Treeshake-2

Webpack-v4 enables treeshake out of box. If you are using the correct syntax, and the referenced pkg is correctly bundled. it would be treeshaked.

https://www.azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash/

To enable tree-shaking in lodash, you have to import functions using syntax like import foo from 'lodash/foo'. import { foo } from 'lodash' will not tree-shake, nor will, obviously, import _ from 'lodash'. Support for this syntax was implemented in Lodash v4.

https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking

PreviousWk-notes-01-22-about-Hooks NextWk-notes-01-16-Bundling-Treeshaking-1

Last updated 5 years ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <title>htm Demo</title> <script type="module"> import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js'; class App extends Component { addTodo() { const { todos = [] } = this.state; this.setState({ todos: todos.concat(`Item ${todos.length}`) }); } render({ page }, { todos = [] }) { return html` <div class="app"> <${Header} name="ToDo's (${page})" /> <ul> ${todos.map(todo => html` <li>${todo}</li> `)} </ul> <button onClick=${() => this.addTodo()}>Add Todo</button> <${Footer}>footer content here<//> </div> `; } } const Header = ({ name }) => html`<h1>${name} List</h1>` const Footer = props => html`<footer ...${props} />` render(html`<${App} page="All" />`, document.body); </script> </html>