Tweet
Tweet

Slide 1

Slide 1 text

Webpack Tuning January 24th 2017 Sebastian Werner, Sebastian Software GmbH

Slide 2

Slide 2 text

@swernerx @sebastiansoft github/sebastian-software Sebastian Werner

Slide 3

Slide 3 text

About me • Co-Initiator & Lead Developer of qooxdoo • Initiator of Jasy Tooling & Core Library • Companies: 1&1, studiVZ, Deutsche Telekom, Zynga, Deutsche Bank, Hornbach, Syzygy,, … • Co-Founder of Sebastian Software GmbH • Today: React, VueJS, Webpack, PostCSS, Rollup

Slide 4

Slide 4 text

Timing Matters Time Machine

Slide 5

Slide 5 text

Time Machine Webpack == qooxdoo generator or jasy

Slide 6

Slide 6 text

But these were implemented in Python… Time Machine

Slide 7

Slide 7 text

…NodeJS is for the Youth Time Machine

Slide 8

Slide 8 text

Some things were missing, some things were better… Time Machine

Slide 9

Slide 9 text

Yep, better. 
 Just because it’s modern does not mean it’s good. Time Machine

Slide 10

Slide 10 text

There is pretty amazing stuff though Time Machine

Slide 11

Slide 11 text

Hot Reloading Generic Transpiling Plugin System Huge Community Developer Awareness

Slide 12

Slide 12 text

Webpack Wise folks bet on good concepts

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Webpack Concepts Static Configuration

Slide 15

Slide 15 text

Webpack Concepts Required by Features like: File Watching Fast Rebuilds

Slide 16

Slide 16 text

Webpack Concepts Required by Features like: File Watching Fast Rebuilds and Hot Reloading Awesomeness

Slide 17

Slide 17 text

Domain Specific Language qooxdoo Grunt

Slide 18

Slide 18 text

API for Task Definition Jasy Gulp Fly Broccoli

Slide 19

Slide 19 text

Everything is possible with Webpack Not a scam

Slide 20

Slide 20 text

Nobody deeply understands Webpack We gonna fix that

Slide 21

Slide 21 text

Everything is a Module Scripts / Styles / Images / Fonts

Slide 22

Slide 22 text

Processing Required ES2017/TypeScript to ES5 Sass/Less to CSS Asset Optimization Sprites Inlining

Slide 23

Slide 23 text

HTTP/2 Bundling is useful even in modern times

Slide 24

Slide 24 text

NodeJS Bundling improves startup times and memory usage

Slide 25

Slide 25 text

Cross Mime Imports Node does not support importing CSS / Assets Especially relevant for SSR (Universal Apps)

Slide 26

Slide 26 text

Cherry Picking / Bundling Reduces API Surface + Parse Time + Memory Usage

Slide 27

Slide 27 text

Basic Config

Slide 28

Slide 28 text

Entry Initial entry point(s) of your application

Slide 29

Slide 29 text

Module Any (virtual) file managed by Webpack

Slide 30

Slide 30 text

Chunks Bundled set(s) of modules

Slide 31

Slide 31 text

Loader Processes file content into preliminary output format

Slide 32

Slide 32 text

Plugin Kind of a middleware which is able to incept basically any operation. Applied after loading of content. Examples: File Loader Plugin: Referencing and copying assets Extract Text Plugin: Extract referenced styles into CSS chunks

Slide 33

Slide 33 text

Webpack Ecosystem

Slide 34

Slide 34 text

Boilerplates • Create React App: Webpack v1, no SSR, Good UX
 by people at Facebook • React Universally: Universal React + Webpack
 by Sean Matheson • Advanced Boilerplate: +PostCSS +Apollo +Redux
 by Sebastian Werner

Slide 35

Slide 35 text

Factory Helpers • Webpack Merge
 Specific deep object merge for custom configs • Webpack Blocks
 Shared/Reusable blocks of configuration

Slide 36

Slide 36 text

Multi Threading • Happypack: 
 Running loaders in parallel

Slide 37

Slide 37 text

Caching • Hard Source: 
 Advanced Caching for Modules
 (Waiting for Webpack v2 Support)

Slide 38

Slide 38 text

Code Splitting • React Async Component: 
 Declarative code splitting with tweaks for SSR

Slide 39

Slide 39 text

Chunk Info • Chunk Manifest Plugin: 
 Extracts hashes into external file

Slide 40

Slide 40 text

News in Webpack v2 See also: https://gist.github.com/sokra/27b24881210b56bbaff7

Slide 41

Slide 41 text

Better Docs https://webpack.js.org/configuration/

Slide 42

Slide 42 text

Native ES6 Modules

Slide 43

Slide 43 text

Tree Shaking Not (yet) like Rollup with Scope Hoisting Not (yet) like Closure Compiler with Cross Bundle Code Motion

Slide 44

Slide 44 text

import() API Relevant for Code Splitting / Dynamic Imports

Slide 45

Slide 45 text

Cleaner Config & Validation

Slide 46

Slide 46 text

Sponsoring

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Hints

Slide 50

Slide 50 text

Compression • Uglify does not work with ES2015 output • Use Babili or Closure Compiler instead • CSS-O is better than CSS Nano • Don’t inline assets into JS

Slide 51

Slide 51 text

Hashing • Webpack Digest Hashing broken • Extract chunk hashes from initial chunk using Chunk Manifest Plugin • Base62 better than Hex • Eight characters are enough

Slide 52

Slide 52 text

Transpiling • Transpile what is needed instead of everything • Babel Preset Env • For current browser only in development

Slide 53

Slide 53 text

Duplication • Multiple versions are transparently used • Lodash vs. Lodash-ES vs. Lodash-XXX • Use ES2015 Imports! Really!

Slide 54

Slide 54 text

Universal Builds • Bundling Node packages for server build is tricky • Light bundling or big bundle • Replace browser modules with „node-noop“ • Assets Plugin for referring to client chunks on server side • Inject „source-map-support“ for source maps in NodeJS

Slide 55

Slide 55 text

Environment • Keep environment specifics local • Useful for API urls, database password, etc. • Ignore from Git

Slide 56

Slide 56 text

Performance Strategies • DLL Bundles - but these require some maintenance • Hard Source for fixing rudimentary Webpack Loader Cache • Happy Pack for parallel transpiling. (But that’s quite broken right now.)

Slide 57

Slide 57 text

Future

Slide 58

Slide 58 text

Performance Most things are fast except loaders + optimization

Slide 59

Slide 59 text

Caching Rebuilding the same code takes surprisingly long

Slide 60

Slide 60 text

Hashing Permanent caching / CDN usage require stable hashes Chunk Manifest Digest Plugin + SHA256 + Base62

Slide 61

Slide 61 text

Parallelism No built-in handling for multi core environments

Slide 62

Slide 62 text

CSS Code Splitting Just not there. When extracting it’s always one chunk.

Slide 63

Slide 63 text

Localization Nothing actively maintained.

Slide 64

Slide 64 text

Permutations Efficiently built multiple variants / locales / environments

Slide 65

Slide 65 text

JS Compression Built-in Uglify does not work with ES2015 outputs

Slide 66

Slide 66 text

Better Tree Shaking After Webpack v2 use insights from 
 Rollup/Closure Compiler

Slide 67

Slide 67 text

Legacy Some legacy stuff which should probably be extracted Legacy hashing, Uglify compression, preliminary progress, … Extracting Hot Loading, Web Workers, … Slimming the Webpack core while improving its API surface

Slide 68

Slide 68 text

Open Source

Slide 69

Slide 69 text

Current Projects • Advanced Boilerplate:
 Universal React + Redux + Apollo + PostCSS • Rollup Plugin Rebase:
 Rollup plugin to flatten and copying non script sources • Pre-Publish:
 Rollup-based pre-publishing utility for libraries • PostCSS Smart Import
 Better importing for PostCSS • PostCSS Simple URL
 Plain and basic URL handling for PostCSS • S15E-JavaScript:
 Standard ESLint / Stylelint + Basic Gulp Tooling

Slide 70

Slide 70 text

Thank You