Please enable JavaScript.

Coggle requires JavaScript to display documents.

Webpack - Coggle Diagram

- - - - you lose tree shaking
      - workaround is use individual granular module
        
        const getLodashUniq = () => import('lodash-es/uniq')
  - - - partial part/static part
      - getFoo = (filename) => import(./bar-folder/${filename}.js) - see .js extension - splitting only js, cool boy asked webpack
    - - not work cos webpack doesn't have any clude
  - - - change chunk name
    - - leverage at development
      - don't split into multi chunks but instead, into only one chunk file
    - - hey, I'm gonna need this file eventually
      - while there's idle time
      - no extra network request 👀
      - if dynamic import in entry point, it's not gonna add <link rel="preload"> by default
      - <link rel="preload" href="my-js-file.js" as="script" type="text/javascript" />
  - - - <link rel="preload" href="/static/FeedPageContainer.js" as="script" type="text/javascript" />
      - <link rel="preload" href="/graphql/query?id=12345" as="fetch" type="application/json" />
    - - The problem with preloads is that with the extra control it provides, comes the extra responsibility of correctly setting the resource priorities.
    - - https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
      - https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715
- - - - code splitting can save you 7s, 10s
    - - only save network time to get files
      - some browsers might save parse cost - not eval and execute
      - fun: caching save you 400ms
      - common chunks
- - - - limit setting to conditional convert or not convert
- - - - first paint
      - first contentful paint
      - first meaningful paint
      - time to interactive