
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
astro-dynamic-import
Advanced tools
This Astro integration lets you import components dynamically, allowing you to pick and choose which components add their scripts and styles to the page. Now you can let a CMS or DB query decide your components without astro sending JS and CSS for all of them!
Astro decides which scripts and styles get included on the page based on the import statements alone. If different components are picked based on the request, this heuristic quickly results in too many assets being sent to the browser. Importing dynamically lets you import components based on a condition and only the rendered components will send their associated assets to the browser.
First, install the astro-dynamic-import
package using your package manager. If you're using npm or aren't sure, run this in the terminal:
npm install astro-dynamic-import
Next, apply this integration to your astro.config.*
file using the integrations
property:
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import dynamicImport from 'astro-dynamic-import';
export default defineConfig({
// ...
integrations: [dynamicImport()],
// ^^^^^^^^^^^^^
});
Once the integration is installed and added to the configuration file, you can import the default function from the "astro:import"
namespace.
---
import dynamic from "astro:import"
const toImport = random() ? "components/Counter.astro" : "components/Ticker.astro"
const Component = await dynamic(toImport)
const initial = 3
---
<Component {initial} />
The dynamic
function takes the path to a component relative to your source directory ("/src"
by default). It returns a promise that resolves to the astro component.
Note that only .astro
components can be imported. The components must be located in the src/components
folder. The imported component must be used in an .astro
file located within src/pages
due to reasons explained here.
For help, check out the Discussions
tab on the GitHub repo.
This package is maintained by lilnasy independently from Astro. The integration code is located at packages/dynamic-import/integration.ts. You're welcome to contribute by opening a PR or submitting an issue!
See CHANGELOG.md for a history of changes to this integration.
FAQs
Let your CMS decide which components to import.
The npm package astro-dynamic-import receives a total of 2,389 weekly downloads. As such, astro-dynamic-import popularity was classified as popular.
We found that astro-dynamic-import demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.