# Optimizer (with Manu) ```sequence source -> extracted: qExtract extracted -> optimized: qEntry optimized -> prod_import: Bundler prod_import -> prod_qrl: qPost prod_import -> extracted: symbol-mfst (runtime) prod_import -> prod_qrl: symbol-mfst prod_qrl -> browser: JS extracted -> browser: SSR - HTML browser -> usage_log: Load Order usage_log -> optimized: priority-mfst (iterative feedback) ``` ## Definition: Javascript artifacts: - **`source`**: Source files. Either `.ts` or `.js`. - **`extracted`**: `qHook` functions extracted to separate entry point files. Goal is to break up the app to as many files as possible. Code in this state can execute on server and properly generate SSR. (may need `symbol-mfst` if the client is running `prod_qrl` instead of `extracted`.) These files can be published into NPM as libraries. - **`optimized`**: Create synthetic entry points which combine multiple symbols from `extracted` step into a single entry point. For optimal output this requires input from `priority-mfst` to determine which symbols should go into which entry points. - **`prod_import`**: Output run though bundling system which combines multiple modules into a single module, tree-shakes unneeded code and minifies the output. - **`prod_qrl`**: Bundles where the dynamic `import()` statements have been replaced by `QRL`s to improve size / runtime performance. Manifests: - **`symbols-mfst`**: A file containing the rename of entry filenames performed by the bundle step. (Resulting files oftentimes have hashes.) - **`priority-mfst`**: A sorted set of symbols by application request priority. This will determine how symbols will grouped in entry files. Tools: - **`qExtract`**: Tool which consumes source code, and refactors it by moving all `qHook` functions into separate entry modules. - **`qEntry`**: Tool which merges single entry module per symbol (`extracted`) into a entry point with multiple symbols. This grouping is controlled by the `priority-mfst`. - **`qPost`**: Tool which replaces dynamic `import()` with `QRL`s to improve size / runtime performance. Other: - **`browser`**: User agent displaying the application. AS the application runs the framework collects order in which the symbols are loaded and sends that information to `usage_log`. - **`usage_log`**: Server REST API which collects statistical information on which symbols are needed in which order. The information is then used to generate `priority-mfst`. An ordered list of symbols. NOTES: > [name=Miško Hevery] After discussing libraries with @manucorporat we came to the conclusion that libraries need to ship normal compiled code before running any `qwik` tooling. The reason for this is that `qwik` needs to be able to create entry points based on the `symbol-mfst` and that requires that the `QRL`s in the source be updated. This means that we will have to go to the NPM folders and update the source code. Given that we need to traverse into the NPM folder, either way, we may as well do it all at the time of application build rather than complicate it for the library authors. > [name=Miško Hevery] Dynamic `import()` is needed because we need the bundler to remove unneeded imports. (Think 3rd party widget library, how do we make sure that we don't bundle all of the library if only some of the widgets are used.) ## Invariants: - **`source`**: - Tests can run directly through `toQRL` trick - Application can run ONLY-IF fully browser side. (Resuming from SSR to client not supported) - **`extracted`**: - Server runs with this code. - If client is served `qBundled` than server requires `entry-manifest` (entry file rename manifest generated by bundling) - **`prod_import`**: An intermediary file format. Serving this to client will break the application because the file names do not match `QRL`s (see next step) - **`prod_qrl`**: Same as `bundle`, but where the `QRL`s have been updated per the `entry-manifest` file.