import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Die meisten Bundler (wie Webpack, Rollup, Parcel, Vite) splitten den Code automatisch, wenn ein dynamischer Import verwendet wird. Solids ", jsx(_components.code, {
        children: "lazy"
      }), "-Methode erlaubt es uns, den Komponenten-Import für verzögert nachzuladene Komponenten zu kapseln. Die Ausgabe ist eine Komponente, die ganz normal im JSX verwendet werden kann, außer dass sie intern den unterliegenden Code lädt, wenn sie zum ersten Mal gerendert wird und den Render-Zweig unterbricht, bis der Code verfügbar ist."]
    }), "\n", jsxs(_components.p, {
      children: ["Um ", jsx(_components.code, {
        children: "lazy"
      }), " zu nutzen, ersetze man die import-Anweisung:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Greeting"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./greeting\""
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "with:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Greeting"
        }), " = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "lazy"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "import"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./greeting\""
        }), "));\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Das wird vermutlich immer noch zu schnell laden, um es zu sehen. Aber man kann eine künstliche Verzögerung einbauen, um das Laden sichtbarer zu machen."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Greeting"
        }), " = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "lazy"
        }), "(", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// simulate delay"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Promise"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: [jsx(_components.span, {
            className: "hljs-params",
            children: "r"
          }), " =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setTimeout"
        }), "(r, ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), "))\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "import"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"./greeting\""
        }), ")\n});\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-f7328997.js.map
