gem-hunter
Language: JavaScript
A rollup plugin to speed up lazy loading
Change dynamic import call sites to also parallely load the static imports of the dynamic chunk being loaded.
This can avoid waterfalls when dynamically importing chunks and can improve performance of lazy loading chunks, especially on slow/high latency connections.
npm i --save-dev rollup-plugin-hoist-import-deps
or
yarn add -D rollup-plugin-hoist-import-deps
import { hoistImportDeps } from 'rollup-plugin-hoist-import-deps'; export default { entry: 'src/main.js', output: { dir: 'output', format: 'es', }, plugins: [hoistImportDeps()], };
Type: String
Default: ''
The baseUrl of be used when preloading the JavaScript files. This is the path of the JS files relative to the index.html (or whatever HTML that is loading the scripts).
Valid only when method is preload.
Example - If your index.html is served from / and the JS is served from /client, set baseUrl to 'client' so that the
href in the preload links are properly preficed with `/client'.
plugins: [hoistImportDeps({baseUrl: 'client'})],
Type: boolean
Default: true
Whether to set the crossorigin attribute of the link element to 'anonymous' when using the link preload method. In certain cases setting this flag to false becomes necessary (See #12).
Valid only when method is preload.
Don't set this option to false unless you know what you are doing.
Example:
plugins: [hoistImportDeps({setAnonymousCrossOrigin: false})],
Lets say you have a entry-point file a.js that dynamically imports b.js
and b.js in turn statically imports c.js.
// a.js export async function myFunction(x) { const { inc } = await import('./b.js'); // Dynamic import return x * inc(x); }
// b.js import { add } from './c.js'; // Static import export function inc(x) { return add(x, 1); }
// c.js export function add(x, y) { return x + y; }
Without this plugin, the output chunk for a.js would look something like:
// output/a.js async function myFunction(x) { const { inc } = await import('./b-467ea706.js'); return x * inc(x); } export { myFunction };
With the plugin the output chunks for a.js would be transformed to look
something like:
function __loadDeps(baseImport, ...deps) { for (const dep of deps) { // Preload code goes here. ... } return import(baseImport); } async function myFunction(x) { const { inc } = await __loadDeps('./b-467ea706.js', './c-a66d9c36.js'); return x * inc(x); } export { myFunction };
So when ./b-467ea706.js is dynamically imported it avoids the JS load
waterfall where its static import ./c-a66d9c36.js is loaded in parallel
instead of sequentially after downloading and parsing the chunk
./b-467ea706.js.
This plugin can make a significant (positive) difference when say lazily loading code over a slow/high latency 3G connection (in the order of 1-2 seconds).
The preload code first tried to use link preload as the method to preload the
static dependencies. If that's not supported in the browser it just falls back
to using fetch to preload the dependencies.
This plugin also allows you to prefetch the script specified by your dynamic
import, by setting window.HOIST_PREFETCH. This puts the preloader code in
prefetch mode where both dependencies and the actual import are prefetched
istead of actually being loaded. This tries to use the browser link prefetch
method which will download the scripts in lower priority. When link prefetch
is unavailable it just uses fetch with requestIdleCallback.
In the following example instead of loading b.js and preload it's
dependencies, it will prefetch b.js and its dependencies.
Later when actual import('./b.js') is executed without the prefetch, it
will load the modules from the prefetch cache instead of going to the
network.
window.HOIST_PREFETCH = true; try { import('./b.js'); } finally { window.HOIST_PREFETCH = undefined; }