scurker / Preact Lazy Route
Licence: mit
Lazy load preact route components
Stars: ✭ 12
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Preact Lazy Route
Pimg
📷 Mini Image Lazy Loader for P(R)eact and Vue
Stars: ✭ 97 (+708.33%)
Mutual labels: lazy-loading, preact
vitext
The Next.js like React framework for better User & Developer experience!
Stars: ✭ 376 (+3033.33%)
Mutual labels: preact, lazy-loading
Hr4r
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (+133.33%)
Mutual labels: code-splitting, lazy-loading
guide-to-async-components
📖 Guide To JavaScript Async Components
Stars: ✭ 79 (+558.33%)
Mutual labels: code-splitting, lazy-loading
Preact Async Route
Async route component for preact-router
Stars: ✭ 132 (+1000%)
Mutual labels: code-splitting, preact
bs-dynamic-import
📦🚀 BuckleScript dynamic import interop on JavaScript environment
Stars: ✭ 31 (+158.33%)
Mutual labels: code-splitting, lazy-loading
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+54866.67%)
Mutual labels: lazy-loading
Proppy
Functional props composition for UI components (React.js & Vue.js)
Stars: ✭ 921 (+7575%)
Mutual labels: preact
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+5475%)
Mutual labels: lazy-loading
Lozad.js
🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
Stars: ✭ 6,932 (+57666.67%)
Mutual labels: lazy-loading
React Lazy Load Image Component
React Component to lazy load images and components using a HOC to track window scroll position.
Stars: ✭ 755 (+6191.67%)
Mutual labels: lazy-loading
Preact Jest Snapshot Test Boilerplate
🚀 Test Preact components using Jest snapshots
Stars: ✭ 24 (+100%)
Mutual labels: preact
Ng Lazyload Image
🖼 A small library for lazy loading images for Angular apps with zero dependencies
Stars: ✭ 683 (+5591.67%)
Mutual labels: lazy-loading
Webpackery
Webpack 4 Orchestration Layer allows for automated async code splitting of anything
Stars: ✭ 26 (+116.67%)
Mutual labels: code-splitting
Microsite
Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
Stars: ✭ 632 (+5166.67%)
Mutual labels: preact
React Cool Inview
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Stars: ✭ 830 (+6816.67%)
Mutual labels: lazy-loading
preact-lazy-route
preact-lazy-route
is a component built for preact-router. Using preact-lazy-route
in combination with a module bundler such as webpack, allows you to implement code splitting on routes with the option to perform server side rendering in your preact application.
Install
$ npm install --save preact-lazy-route
Usage
import { h, render } from 'preact';
import Router from 'preact-router';
import LazyRoute from 'preact-lazy-route';
const App = () => (
<Router>
<LazyRoute path="/" component={() => import('./components/home')} />
<LazyRoute path="/about" component={() => import('./components/about')} />
<LazyRoute path="/settings" component={() => import('./components/settings')} />
</Router>
);
render(<App />, document.body);
Loading Fallback
You can provide an optional loading component to be displayed while your component is being fetched.
<LazyRoute path="/"
component={() => import('./components/home')}
loading={MyLoadingComponent} />
Server Side Rendering
preact-lazy-route
also allows for you to define an optional server side rendering path:
import path from 'path';
...
<LazyRoute path="/"
component={() => import('./components/home')}
ssrPath={path.resolve(__dirname, './components/home')}
useSsr={!process.env.BROWSER} />
You will need to set useSsr
to true
when rendering on the server by setting an environment variable in your node process or using webpack's define plugin for your webpack bundle.
Node Environment
$ NODE=true node index.js
<LazyRoute path="/" useSsr={process.env.NODE} />
Webpack
import webpack from 'webpack';
export default {
entry: {
app: './src/app.jsx'
},
plugins: [
new webpack.DefinePlugin({
'process.env.BROWSER': JSON.stringify(true)
})
]
};
<LazyRoute path="/" useSsr={!process.env.browser} />
License
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].