3 ms·
One of the best bang for your buck optimizations I did recently was add the following to our next.config.js (we're using V13): const swcOptions = require('ne
by bouk 4y ago
One of the best bang for your buck optimizations I did recently was add the following to our next.config.js (we're using V13):
const swcOptions = require('next/dist/build/swc/options')
const { getLoaderSWCOptions } = swcOptions
swcOptions.getLoaderSWCOptions = function (...args) {
const result = getLoaderSWCOptions(...args)
result.jsc.target = 'es2022'
return result
}
This overrides the target https://swc.rs/ https://swc.rs/ uses from the default of es5 to es2022, which sped up our quite heavy app by up to 3X in hot code paths, just by using newer JS syntax instead of falling back to 'transpiled' versions. Unfortunately Next.JS doesn't allow setting the target directly. My hunch is that especially this syntax in our hot path was a big benefactor:
function cloneAndSetProperty(obj, prop, value) {
return { ...obj, [prop]: value }
}
- chrismorgan 4y agoOn your cloneAndSetProperty, consider if you can use a prototype instead of a clone: function chainedPrototypePlusProperty(obj, prop, value) { const newObject = Object.create(obj); newObject[prop] = value; return newObject; // Alternatively: return Object.create(obj, { [prop]: { configurable: true, enumerable: true, value } }); } It depends entirely on what you’re doing with it (not mutating obj while you keep the returned object, not depending on properties being own), but in some cases this will be suitable, and depending on the data and what you’re doing, could be drastically faster (it’s O(1) rather than O(n) on the number of properties, and access after could be much of a muchness).
- bouk 4y agoI've tried this and found it to be much slower
- danfritz 4y agoYou can enable the experimental `browsersListForSwc: true,` option which uses your browserlist to determine the appropriate target. You can also disable `legacyBrowsers` ref: https://nextjs.org/blog/next-12-2#other-improvements https://nextjs.org/blog/next-12-2#other-improvements
- bouk 4y agoNice, it seems this is now the default in Next v13, just updated! (We were actually using v12.0 still)