All Projects → vikerman → rollup-plugin-hoist-import-deps

vikerman / rollup-plugin-hoist-import-deps

Licence: MIT license
A rollup plugin to speed up lazy loading

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to rollup-plugin-hoist-import-deps

React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: ✭ 313 (+389.06%)
Mutual labels:  rollup, code-splitting
Plugins
🍣 The one-stop shop for official Rollup plugins
Stars: ✭ 2,238 (+3396.88%)
Mutual labels:  rollup, rollup-plugins
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (+265.63%)
Mutual labels:  rollup, code-splitting
dva-boot
🌱 使用CRA(create-react-app v2) 构建的react dva 2 脚手架 支持动态路由、接口数据模拟、按功能分层、并且包含诸多实用的小组件
Stars: ✭ 79 (+23.44%)
Mutual labels:  code-splitting
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-70.31%)
Mutual labels:  code-splitting
npm-es-modules
Breakdown of 7 different ways to use ES modules with npm today.
Stars: ✭ 67 (+4.69%)
Mutual labels:  rollup
rollup-plugin-tagged-template
Use plain HTML files as tagged templates.
Stars: ✭ 24 (-62.5%)
Mutual labels:  rollup
zero
📦 A zero config scripts library
Stars: ✭ 17 (-73.44%)
Mutual labels:  rollup
rollup-plugin-swc
Rollup plugin to compile bundles with the SWC.
Stars: ✭ 59 (-7.81%)
Mutual labels:  rollup
vue-frag-plugin
Webpack/Rollup/Vite plugin to add multiple root-node support to Vue 2 SFCs
Stars: ✭ 37 (-42.19%)
Mutual labels:  rollup
fly-helper
It's a Tool library, method collection
Stars: ✭ 21 (-67.19%)
Mutual labels:  rollup
Modern-Web-App
React PWA with SSR and Code splitting
Stars: ✭ 45 (-29.69%)
Mutual labels:  code-splitting
rocket
The modern web setup for static sites with a sprinkle of JavaScript
Stars: ✭ 169 (+164.06%)
Mutual labels:  rollup
manager
OVHcloud Control Panel
Stars: ✭ 153 (+139.06%)
Mutual labels:  rollup
rollup-loader
Rollup does what it can do, and let Webpack finish the job.
Stars: ✭ 86 (+34.38%)
Mutual labels:  rollup
magic-scroll
Apple Magic Mouse scrolling effect for normal mouses
Stars: ✭ 43 (-32.81%)
Mutual labels:  rollup
r1cs-tutorial
Tutorial for writing constraints in the `arkworks` framework
Stars: ✭ 74 (+15.63%)
Mutual labels:  rollup
rollup-jest-boilerplate
🎉 Full featured boilerplate for building JavaScript libraries the modern way
Stars: ✭ 81 (+26.56%)
Mutual labels:  rollup
react-server-renderer
Yet another simple React SSR solution inspired by vue-server-render
Stars: ✭ 28 (-56.25%)
Mutual labels:  code-splitting
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (-45.31%)
Mutual labels:  rollup

rollup-plugin-hoist-import-deps

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.

Install

npm i --save-dev rollup-plugin-hoist-import-deps

or

yarn add -D rollup-plugin-hoist-import-deps

Usage

import { hoistImportDeps } from 'rollup-plugin-hoist-import-deps';

export default {
  entry: 'src/main.js',
  output: {
    dir: 'output',
    format: 'es',
  },
  plugins: [hoistImportDeps()],
};

Options

baseUrl

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'})],

setAnonymousCrossOrigin

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})],

Example

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).

Preload fallback

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.

Prefetch support

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;
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].