After splitting my 10k lines of code into 120 modules, I’m now facing very slow loading time.
The main add-on page that overrides New tab page is now loading 350ms and before it was 100ms. This is way too long… I need to bundle it to a single js file.
Can you recommend a specific tool to bundle extensions with some nice examples? Something super simple would be nice.
Or maybe there is way to speed-up module loader?
After reading amazing article:
And then reading about each of those bundlers:
I’ve decided to go with Rollup because of native ES6 modules support and smallest bundle size. But I’m sure Webpack would be also good choice as it can handle all other assets as well.
Installation:
npm i rollup -D
npm i rollup-plugin-node-resolve rollup-plugin-terser -D
touch rollup.config.js
“rollup.config.js” can be super simple:
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'firefox_dev/dial.js',
output: {
file: 'firefox_dist/dial.js',
format: 'iife',
},
plugins: [
resolve(),
]
};
Execution with:
npx rollup -c
…totally fixed the loading time!
Make sure to submit a source code bundle. You’d just submit the package.json/package-lock.json/yarn.lock etc. and delete the actual node_modules folder (you can get that pretty nicely with npm pack and very little setup) as a ZIP and then give instructions of the commands required to be ran to generate the built ZIP you uploaded to AMO.