From dcffcfa948afbcce2a76913ae24fd1848b244c7e Mon Sep 17 00:00:00 2001 From: Samar Panda Date: Tue, 31 Jul 2018 09:53:32 +0530 Subject: [PATCH] lazy loading modules using webpack import --- README.md | 8 ++++++-- src/index.js | 14 +++++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 335ee7b..0c8281b 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,10 @@ module.exports = ({mode}) => { 21. File loader & Url loader - `url-loader` uses `file-loader` under the hood so we are installing both at the same time. And in webpack.config.js we can only see url-loader but not file-loader as of now. -22. Implementing a managable way of configuring presets. Found this to be one of the elegant way i have came across yet. Run command `npm run prod` everything working. Now we can start adding different preset / experimentation configurations those can be composed together. +22. Implemented a managable way of configuring presets. Found this to be one of the elegant way i have came across yet. Run command `npm run prod` everything working. Now we can start adding different preset / experimentation configurations those can be composed together. -23. Implementing `webpack-bundle-analyzer` preset. You can try prod analyze the build by running `npm run prod:analyze` +23. Implemented `webpack-bundle-analyzer` using preset concept. You can try prod analyze the build by running `npm run prod:analyze` + +24. compress-webpack-plugin + +25. Lazy loading of footer using webpack `import` syntax \ No newline at end of file diff --git a/src/index.js b/src/index.js index e5bcd51..f2d5ee0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import nav from './nav' -import { footer } from './footer' + import makeButton from './button' import {makeColorStyle} from './button-styles' import imageUrl from './webpack-logo.jpg' @@ -9,12 +9,20 @@ import button from './button.css' // import {createImage} from './create-image' import createImage from './create-image' +// import { footer } from './footer' +const loadFooter = () => import('./footer')// Lazy loading footer configured + const button1 = makeButton('Yeap A Button') button1.style = makeColorStyle('red') document.body.appendChild(button1) -console.log(imageUrl) const image = createImage(imageUrl) document.body.appendChild(image) -document.body.appendChild(footer) \ No newline at end of file +button1.addEventListener('click', (event) => { + loadFooter('./footer') + .then((fm) => { + console.log(fm.footer) + document.body.appendChild(fm.footer) + }) +})