diff --git a/content/guides/code-splitting.md b/content/guides/code-splitting.md index 566270bf8bee..1ca23b40ccd8 100644 --- a/content/guides/code-splitting.md +++ b/content/guides/code-splitting.md @@ -62,6 +62,7 @@ __webpack.config.js__ ``` js const path = require('path'); +const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { @@ -73,7 +74,7 @@ module.exports = { path: path.resolve(__dirname, 'dist') }, plugins: [ - new HtmlWebpackPlugin({ + new HTMLWebpackPlugin({ title: 'Code Splitting' }) ] @@ -113,6 +114,7 @@ __webpack.config.js__ ``` diff const path = require('path'); + const webpack = require('webpack'); + const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { @@ -120,7 +122,7 @@ __webpack.config.js__ another: './src/another-module.js' }, plugins: [ - new HtmlWebpackPlugin({ + new HTMLWebpackPlugin({ title: 'Code Splitting' - }) + }), @@ -170,6 +172,7 @@ __webpack.config.js__ ``` diff const path = require('path'); - const webpack = require('webpack'); + const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { @@ -178,7 +181,7 @@ __webpack.config.js__ - another: './src/another-module.js' }, plugins: [ - new HtmlWebpackPlugin({ + new HTMLWebpackPlugin({ title: 'Code Splitting' - }), + }) @@ -194,6 +197,21 @@ __webpack.config.js__ }; ``` +We'll also update our project to remove the now unused files: + +__project__ + +``` diff +webpack-demo +|- package.json +|- webpack.config.js +|- /dist +|- /src + |- index.js +- |- another-module.js +|- /node_modules +``` + Now, instead of statically importing lodash, we'll use dynamic importing to separate a chunk: __src/index.js__ diff --git a/content/guides/lazy-loading.md b/content/guides/lazy-loading.md index ed98f6d99487..485ee02a16a6 100644 --- a/content/guides/lazy-loading.md +++ b/content/guides/lazy-loading.md @@ -19,7 +19,20 @@ Lazy, or "on demand", loading is a great way to optimize your site or applicatio Let's take the example from [Code Splitting](/guides/code-splitting#dynamic-imports) and tweak it a bit to demonstrate this concept even more. The code there does cause a separate chunk, `lodash.bundle.js`, to be generated and technically "lazy-loads" it as soon as the script is run. The trouble is that no user interaction is required to load the bundle -- meaning that every time the page is loaded, the request will fire. This doesn't help us too much and will impact performance negatively. -Let's try something different. We'll add an interaction to log some text to the console when the user clicks a button. However, we'll wait to load that code until the actual interaction occurs for the first time. To do this we'll go back and extend the original example from [Getting Started](/guides/getting-started) and leave the `lodash` in the main chunk. +Let's try something different. We'll add an interaction to log some text to the console when the user clicks a button. However, we'll wait to load that code (`print.js`) until the interaction occurs for the first time. To do this we'll go back and rework the [final _Dynamic Imports_ example](/guides/code-splitting#dynamic-imports) from _Code Splitting_ and leave `lodash` in the main chunk. + +__project__ + +``` diff +webpack-demo +|- package.json +|- webpack.config.js +|- /dist +|- /src + |- index.js ++ |- print.js +|- /node_modules +``` __src/print.js__ @@ -34,14 +47,15 @@ export default () => { __src/index.js__ ``` diff - import _ from 'lodash'; - - function component() { ++ import _ from 'lodash'; ++ +- async function getComponent() { ++ function component() { var element = document.createElement('div'); +- const _ = await import(/* webpackChunkName: "lodash" */ 'lodash'); + var button = document.createElement('button'); + var br = document.createElement('br'); -- // Lodash, now imported by this script + button.innerHTML = 'Click me and look at the console!'; element.innerHTML = _.join(['Hello', 'webpack'], ' '); + element.appendChild(br); @@ -58,14 +72,34 @@ __src/index.js__ return element; } - document.body.appendChild(component()); +- getComponent().then(component => { +- document.body.appendChild(component); +- }); ++ document.body.appendChild(component()); ``` W> Note that when using `import()` on ES6 modules you must reference the `.default` property as it's the actual `module` object that will be returned when the promise is resolved. Now let's run webpack and check out our new lazy-loading functionality: -?> Add bash example of webpack output +``` bash +Hash: e0f95cc0bda81c2a1340 +Version: webpack 3.0.0 +Time: 1378ms + Asset Size Chunks Chunk Names +print.bundle.js 417 bytes 0 [emitted] print +index.bundle.js 548 kB 1 [emitted] [big] index + index.html 189 bytes [emitted] + [0] ./src/index.js 742 bytes {1} [built] + [2] (webpack)/buildin/global.js 509 bytes {1} [built] + [3] (webpack)/buildin/module.js 517 bytes {1} [built] + [4] ./src/print.js 165 bytes {0} [built] + + 1 hidden module +Child html-webpack-plugin for "index.html": + [2] (webpack)/buildin/global.js 509 bytes {0} [built] + [3] (webpack)/buildin/module.js 517 bytes {0} [built] + + 2 hidden modules +``` ## Frameworks