# Optimizer Demo

**Try out**: :arrow_right: [Qwik Optimizer Playground](https://qwik-playground.builder.io/#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) :arrow_left:

- Observe how code which is not written with explicit lazy loading can be converted into a lazy loadable code.
- Optimizer has full control over how many chunks it creates. Chunk count and source code are fully independent. (You don't need to change source code to change where the lazy loaded bounderies are.)

# FAQ

What is it?
> Qwik Optimizer is part of Qwik which breaks up your source code from large monolithic code base into many small lazy loadable chunks. The framework can than download the chunks on as-need-basis.

But I can already do that with dynamic `import()`?
> When using `import()` you (as a developer) must decide where the lazy loaded boundaries are. The benefit of Optimizer is that you can experiment with how code is broken up into chunks without changing any code. Also the framework creates lazy loaded boundaries everywhere. So no thinking is required to get the benefits.

Why are so many files created? Aren't too many small requests worse?
> The point of Optimizer is to allow you to experiment with different chunk sizes to find the optimal strategy. (For small applications, a single chunk would be preferable. )

Would having that many chunks create delay for first interaction?
> To mitigate this, the application runtime starts downloading the chunks immediately in the background using a web-worker. This ensures that the code is downloaded early without negatively effecting the Google PageSpeed score.

How do you know what the optimal load order is?
> There is an optimal chunk strategy, but such strategy is not obvious until the application is built and its runtime is observed using actual users. When the Qwik application runs it collects the order in which the symbols are used. The order is then used to feed back into Optimizer so that the optimizer can collocate symbols which are needed together into the same chunk. This way, the optimizer can create optimal chunks without any changes to the source code.

What is `qHook`?
> Think of `qHook` as lazy loaded boundary. `qHook` is a marker which tells the optimizer that the code needs to be extracted into a top level lazy loadable entry point. A typical application can hove houndreths/thousends `qHooks` which gives great freedom to the optimizer on how to best break up the application. `qHook` get converted into a URL which gets embeded into the SSR HTML response which tells the Qwik framework where the code for a given listener should be downloaded from.

Why can't variables within a listener access variables within the component's closure?
> In order for the Optimizer to be able to pull the `qHook` code into a top level function which can be lazy loaded, the function can't close over most variables. Closing over the variables would prevent code from moving. `qHook` functions are allowed to close over symbols which are `import`ed or `export`ed only. The Qwik framework is written in such a way so that you don't find a need to close over these variables.