Wk-notes-01-17-bundling-browser-module-treeshake-2
How to use browser js module
A great cdn: https://unpkg.com/
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/[email protected]/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
Last updated
Was this helpful?