Skip to content

Instantly share code, notes, and snippets.

@mavame mavame/00-old.js
Last active Sep 7, 2017

What would you like to do?
Lazy-loading (code splitting) ES6 using Webpack 3
import Flickity from 'flickity'; // flickity now appears in main bundle.
const slideshow = document.querySelector('.slideshow');
if (slideshow) {
new Flickity(...);
} else {
// well, slideshow doesn't exist but we're still loading Flickity on every page :-(
// better way of doing this is to wait until you know you need Flickity and use System.import which is a Webpack-specific thing
const slideshow = document.querySelector('.slideshow');
if (slideshow)
System.import('flickity').then(Flickity => {
new Flickity(...);
// now Flickity is in a different bundle, loaded automatically at runtime only when needed (when .slideshow exists).
// make sure you include a publicPath definition in your webpack config
module.exports = {
output: {
publicPath: '/assets/',
// this will be where webpack tries to resolve the individual bundle it generated when System.import() ran.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.