Speed Up Webpack for Aurelia 1
Among many JavaScript frameworks, I found Aurelia to be the best. It is simple to write, yet powerful and stable. However, in the case of Aurelia 1, the compilation process can be slow with good old Webpack. I tried several tools—including Vite, Rspack, and tsgo—and saw a 9.6x speed improvement using Webpack itself.
Before
yarn start # (webpack + tsc)
# webpack 5.99.9 compiled successfully in 11500 ms
After
yarn start # (webpack + cache + tsc + ForkTsCheckerWebpackPlugin)
# 1st run: webpack 5.99.9 compiled successfully in 6177 ms
# 2nd run: webpack 5.99.9 compiled successfully in 1195 ms (9.6x faster!)
How?
I just added file caching and ForkTsCheckerWebpackPlugin to my webpack.config.js and achieved a 9.6x speedup on the second run. Because I had upgraded from Webpack 4, I wasn’t aware of the caching.
ForkTsCheckerWebpackPlugin forces ts-loader (TypeScript compiler frontend) to set `transpileOnly: true` to speed up transpile and does execute type checking in a separate thread.
yarn add -D fork-ts-checker-webpack-plugin
- webpack.config.js
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; //***
...
export default ({ production }, { analyze, hmr, port, host }) => ({
cache: {
type: 'filesystem',
},
// ...other config such as ts-loader
plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: {
diagnosticOptions: {
semantic: true,
syntactic: true,
},
},
}),
Also, don't forget to enable Hot Module Reloading (HMR) in aurelia_project/aurelia.json:
- aurelia_project/aurelia.json
"platform": {
"hmr": true
}
Other trials
As shown above, Webpack takes about 1 second to start, and subsequent work with HMR takes around 0.2 seconds. I’m personally very satisfied with this. Since I took quite a few detours before reaching this point, I’d like to share those as well.
🔸 thread-loader (TypeScript compilation in parallel)
yarn start # (webpack + cache + transpileOnly + thread-loader + fork-ts-checker-webpack-plugin + tsc)
# 1st run: webpack 5.99.9 compiled successfully in 6775 ms
# 2nd run: webpack 5.99.9 compiled successfully in 1061 ms
In this case, the benefit of thread-loader was negligible.
🔸 tsgo (TypeScript compiler written in Go)]
Tsgo is a new transpiler under development that is expected to become TypeScript 7. It's very fast, but it doesn't seem to support @autoinject (TypeScript API), and many features are still unimplemented.
🔸 Webpack + esbuild (TypeScript transpiler written in Go)
yarn start
# webpack 5.99.9 compiled successfully in 6333 ms
Build time was comparable to tsc, not significantly faster.
@autoinject didn’t work, although I have "experimentalDecorators": true in tsconfig.json → app failed to run.
🔸 Vite + esbuild
❌ vite-aurelia-plugin does not support Aurelia 1
🔸 Rspack (Webpack-near-compatible bundler written in Rust)
Rspack provides an API similar to Webpack.
However, aurelia-webpack-plugin did not work. I tried porting it to Rspack but found too many API incompatibilities.
Conclusion
The caching feature introduced in Webpack 5 dramatically reduced compile times. Without overcomplicating things, this is by far the best approach.
