Moving Pleo’s frontend into the Third Age of JavaScript. From Webpack to Vite.

@KENNETH_SKOVHUS MOVING PLEO’S FRONTEND INTO THE THIRD AGE OF JAVASCRIPT
FROM WEBPACK TO VITE @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

@KENNETH_SKOVHUS HI! I'M KENNETH HAVING FUN WITH REACT SINCE 2015
🧙 PLEO’S WEB CORE TEAM WORKED AT: ISSUU, LEO INNOVATION LABS, UNITY, TOMORROW (ELECTRICITYMAP.ORG)

Pleo Technologies About us One solution for all your spending.

@KENNETH_SKOVHUS VITE NEXT GENERATION FRONTEND TOOLING 🙋

@KENNETH_SKOVHUS HISTORICAL CONTEXT

@KENNETH_SKOVHUS THIRD AGE OF JAVASCRIPT? INSPIRATION: SHAWN SWYX WANG

@KENNETH_SKOVHUS FIRST AGE OF JS 1997-2007 BUILDING OUT THE LANGUAGE

LIBRARIES: DOJO, JQUERY, MOOTOOLS LANGUAGE: ES1-ES3, ES4 ABANDONED

LIBRARIES: DOJO, JQUERY, MOOTOOLS LANGUAGE: ES1-ES3, ES4 ABANDONED MACROMEDIA FLASH THRIVING 🎄

@KENNETH_SKOVHUS USERS EXPLORING AND EXPANDING THE LANGUAGE SECOND AGE OF
JS 2009-2019

@KENNETH_SKOVHUS USERS EXPLORING AND EXPANDING THE LANGUAGE RUNTIMES: CHROME, NODE.JS
(COMMON JS), ELECTRON, REACT NATIVE TOOLS: NPM, COFFEESCRIPT, BROWSERIFY, WEBPACK, FLOW, TYPESCRIPT, JEST, PRETTIER LIBRARIES: BACKBONE, ANGULAR, METEOR, REACT, VUE, SVELTE LANGUAGE: ES5, ES6 (MODULES), ES201X+ SECOND AGE OF JS 2009-2019

@KENNETH_SKOVHUS COLLAPSING LAYERS OF TOOLING & CLEARING AWAY LEGACY ASSUMPTIONS
THIRD AGE OF JS 2020-2030?

@KENNETH_SKOVHUS CLEARING AWAY LEGACY ASSUMPTIONS 👋 COMMON JS, MODULES NOT
SUPPORTED 👋 JS TOOLS BUILD IN JS 👋 LANGUAGE VARIATIONS (BABEL, TYPESCRIPT) 👋 CUSTOM FILE LOADERS (E.G. SVG, CSS MODULES) THIRD AGE OF JS 2020-2030?

@KENNETH_SKOVHUS RUNTIMES: DENO, ? TOOLS: ROME, ESBUILD, VITE, PARCEL, SWC,
REASON, SVELTE THIRD AGE OF JS 2020-2030?

@KENNETH_SKOVHUS VITE “VIT” DEV SERVER & BUILD TOOL BY THE
VUE COMMUNITY BASED ON ESBUILD (GO) & ROLLUP

@KENNETH_SKOVHUS VITE “VIT” DEV: ESM (NO BUNDLING), INSTANT HMR PROD:
BUNDLING USING ROLLUP

@KENNETH_SKOVHUS PLEO CONTEXT

@KENNETH_SKOVHUS

@KENNETH_SKOVHUS REACT TYPESCRIPT SINGLE PAGE APP CLIENT SIDE RENDERED ~250K
LINES OF CODE

@KENNETH_SKOVHUS SLOW CUSTOM TOOLCHAIN BASED ON WEBPACK 4 2019 MAY:
DREAMING OF REPLACE THIS WITH A COMMUNITY MAINTAINED ONE (E.G. CREATE REACT APP) 2022 APRIL: WE MIGRATED TO VITE

@KENNETH_SKOVHUS LET US SEE HOW WE DID IT

@KENNETH_SKOVHUS 🚧 WHAT NEEDED TO BE DONE?

@KENNETH_SKOVHUS 🚧 GET RID OF COMMON JS AND WEBPACK LOADER
SYNTAX

@KENNETH_SKOVHUS 🚧 SWITCH TO RELATIVE DYNAMIC IMPORTS

@KENNETH_SKOVHUS 🚧 UPGRADE DEPENDENCIES FOR ESM COMPATIBILITY 🙈

@KENNETH_SKOVHUS 🚧 HACK SOME DEPENDENCIES FOR ESM COMPATIBILITY import {viteCommonjs}
from '@originjs/vite-plugin-commonjs' resolve: { alias: { // Workaround as ESM version of react-virtualized is broken. // https://github.com/bvaughn/react-virtualized/issues/1212 'react-virtualized': 'react-virtualized/dist/umd/react-virtualized.js', }, }, plugins: [ // Fix missing ESM support for legacy third parties viteCommonjs({include: ['react- fl exbox-grid']), ]

@KENNETH_SKOVHUS 🚧 ENABLE JS-LINGUI (I18N) TO SUPPORT ESBUILD vite-plugin-babel-macros

@KENNETH_SKOVHUS 🚧 ENABLE JS-LINGUI (I18N) TO SUPPORT ESBUILD

@KENNETH_SKOVHUS 🚧 MAKE STORYBOOK NOT DEPEND ON OLD WEBPACK SETUP

@KENNETH_SKOVHUS 🚧 DELETE WEBPACK CODE AND RELATED DEPENDENCIES!

@KENNETH_SKOVHUS 🌦 TESTING, TESTING, TESTING

@KENNETH_SKOVHUS

@KENNETH_SKOVHUS THE OUTCOME* *) DISCLAIMER: CUSTOM WEBPACK SETUP POTENTIALLY NOT
SUPER OPTIMIZED

@KENNETH_SKOVHUS THE OUTCOME: PRODUCTION BUILD (CI) Webpack Vite % 212s
±8s 89s ± 5s -58 %

@KENNETH_SKOVHUS THE OUTCOME: YARN START TO INTERACTION Webpack Vite %
50s 12s -76 %

@KENNETH_SKOVHUS THE OUTCOME: HOT MODULE REPLACEMENT Webpack Vite % n/a
(~800ms compile) 2-40ms 🚀🚀🚀

@KENNETH_SKOVHUS THE OUTCOME: FIRST CONTENTFUL PAINT Webpack Vite % 10s
±0.6s 7.2s ±0.6s -28 % Better bundle splitting, less down-levelling, better tree shaking

@KENNETH_SKOVHUS THE OUTCOME: LIGHTHOUSE PERFORMANCE Webpack Vite % 78 89
14 % Better bundle splitting, less down-levelling, better tree shaking

@KENNETH_SKOVHUS THE OUTCOME: LEAN BUILD/DEV CONFIG ~100 lines of Vite
con fi guration

@KENNETH_SKOVHUS 😍

@KENNETH_SKOVHUS CLEARING AWAY LEGACY ASSUMPTIONS 👋 COMMON JS, MODULES NOT
SUPPORTED 👋 JS TOOLS BUILD IN JS 👋 LANGUAGE VARIATIONS (BABEL, TYPESCRIPT) 👋 CUSTOM FILE LOADERS (E.G. SVG, CSS MODULES) THIRD AGE OF JS 2020-2030?

@KENNETH_SKOVHUS DEVELOPMENT (ESM) AND PRODUCTION (BUNDLED) ENVIRONMENT FURTHER APART TRADEOFFS?

FROM WEBPACK TO VITE @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

FROM X TO Y @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

@KENNETH_SKOVHUS THANKS FOR LISTENING!

Moving Pleo’s frontend into the Third Age of Ja...

Moving Pleo’s frontend into the Third Age of JavaScript. From Webpack to Vite.

More Decks by Kenneth Skovhus

Other Decks in Programming

Featured

Transcript