This post demonstrates how to speed up your Docusaurus build by using SWC and the swc-loader
for webpack.
35 posts tagged with "webpack"
View All TagsPreload fonts with Docusaurus (updated 03/11/2022)
When we're using custom fonts in our websites, it's good practice to preload the fonts to minimise the flash of unstyled text. This post shows how to achieve this with Docusaurus.
webpack? esbuild? Why not both?
Builds can be made faster using tools like esbuild. However, if you're invested in webpack but would still like to take advantage of speedier builds, there is a way. This post takes us through using esbuild alongside webpack using esbuild-loader.
Blog Archive for Docusaurus
Docusaurus doesn't ship with "blog archive" functionality. By which I mean, something that allows you to look at an overview of your historic blog posts. It turns out it is fairly straightforward to implement your own. This post does just that.
ts-loader goes webpack 5
ts-loader
has just released v9.0.0. This post goes through what this release is all about, and what it took to ship this version. For intrigue, it includes a brief scamper into my mental health along the way. Some upgrades go smoothly - this one had some hiccups. But we'll get into that.
Using TypeScript and ESLint with webpack (fork-ts-checker-webpack-plugin new feature!)
The fork-ts-checker-webpack-plugin
has, since its inception, performed two classes of checking:
TypeScript / webpack - you down with PnP? Yarn, you know me!
Yarn PnP is an innovation by the Yarn team designed to speed up module resolution by node. To quote the (excellent) docs:
TypeScript and high CPU usage - watch don't stare!
I'm one of the maintainers of the fork-ts-checker-webpack-plugin. Hi there!
fork-ts-checker-webpack-plugin v1.0
It's time for the first major version of fork-ts-checker-webpack-plugin
. It's been a long time coming :-)
TypeScript and webpack: Watch It
All I ask for is a compiler and a tight feedback loop. Narrowing the gap between making a change to a program and seeing the effect of that is a productivity boon. The TypeScript team are wise cats and dig this. They've taken strides to improve the developer experience of TypeScript users by introducing a "watch" API which can be leveraged by other tools. To quote the docs:
You Might Not Need thread-loader
It all started with a GitHub issue. Ernst Ammann reported:
ts-loader Project References: First Blood
So project references eh? They shipped with TypeScript 3. We've just shipped initial support for project references in ts-loader v5.2.0
. All the hard work was done by the amazing Andrew Branch. In fact I'd recommend taking a gander at the PR. Yay Andrew!
Using TypeScript and webpack alias: goodbye relative paths
This post shows how you can use TypeScript with webpack alias
to move away from using relative paths in your import
statements.
It's Not Dead 2: mobx-react-devtools and the undead
I spent today digging through our webpack 4 config trying to work out why a production bundle contained code like this:
if("production"!==e.env.NODE_ENV){//...
My expectation was that with webpack 4 and 'mode': 'production'
this meant that behind the scenes all process.env.NODE_ENV
statements should be converted to 'production'
. Subsequently Uglify would automatically get its groove on with the resulting if("production"!=="production") ...
and et voilà!... Strip the dead code.
It seemed that was not the case. I was seeing (regrettably) undead code. And who here actually likes the undead?
It's Not Dead: webpack and dead code elimination limitations
Webpack has long supported the notion of dead code elimination. webpack facilitates this through use of the DefinePlugin
. The compile time value of process.env.NODE_ENV
is set either to 'production'
or something else. If it's set to 'production'
then some dead code hackery can happen. Libraries like React make use of this to serve up different, and crucially smaller, production builds.
ts-loader 4 / fork-ts-checker-webpack-plugin 0.4
webpack 4 has shipped!
Finding webpack 4 (use a Map)
Update: 03/02/2018
webpack 4 - ts-loader / fork-ts-checker-webpack-plugin betas
The first webpack 4 beta dropped on Friday. Very exciting! Following hot on the heels of those announcements, I've some news to share too. Can you guess what it is?
ts-loader 2017 retrospective
2017 is drawing to a close, and it's been a big, big year in webpack-land. It's been a big year for ts-loader
too. At the start of the year v1.3.3 was the latest version available, officially supporting webpack 1. (Old school!) We end the year with ts-loader
sitting pretty at v3.2.0 and supporting webpack 2 and 3.
The TypeScript webpack PWA
So, there you sit, conflicted. You've got a lovely build setup; it's a thing of beauty. Precious, polished like a diamond, sharpened like a circular saw. There at the core of your carefully crafted setup sits webpack. Heaving, mysterious... powerful.