I’d like to share a portion of my blog article here. For the full version, including trials with Vite, tsgo, and more, please check out the full post.
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
}