This enables Vike to load the file /pages/+config.js without having to load LayoutDefault.jsx. This means that Vike can quickly load all your +config.js files without having to load any runtime code.
These fake imports, which we call pointer imports, apply only to +config.js files. Imports in other + files are normal imports as usual.
It's similar to when you import images:
import logo from '../images/logo.svg'// When you import an image, you don't actually load it: you get a URL instead.console.log(logo) // Prints: /assets/logo.svg
Vike transforms an import inside +config.js to be a pointer import if and only if it resolve to a .jsx file, a .vue file, or any other file that doesn't end with .js or .ts (or .mjs/.mts/.cjs/.cts). For example:
// /pages/+config.js// Environment: config// Resolves to the file LayoutDefault.jsx (a .jsx file) => pointer importimport Layout from '../layouts/LayoutDefault'// Resolves to the file ssr.js (a .js file) => normal importimport ssr from './ssr'console.log(Layout) // Prints: import:../layouts/LayoutDefault:defaultconsole.log(ssr) // Prints: falseexport default { Layout, ssr}
A .jsx or .vue file is always meant to be client- / server-side runtime code. (I.e. it's never used for config logic.) That's why it makes sense that Vike always treats .jsx and .vue as pointer imports.
Manually mark pointer imports
You can manually mark an import to be a pointer import:
// /pages/+config.js// Environment: configimport ssr from './ssr' with { type: 'pointer' }console.log(ssr) // Prints: import:./ssr:default
🚧
The with { type: 'pointer' } import attribute isn't implement yet, see workaround at #1500.
Config code isn't runtime code
The config code in itself is never included in runtimes:
// /pages/some-page/+config.js// A CSS import in a config file doesn't have any effect. CSS should// be imported in runtime files such as +Page.js instead.import './some.css'// This log is printed only when Vike loads this +config.js file (at development, and when// building your app). This log isn't included in the client nor server runtime.// Consequently, you won't see this log in production.console.log("I will never be logged in production")