1. 正常加载可以认为是并行加载,在同一时间加载多个文件, index.js 中 引入 test.js , 点击按钮之前已经加载了 test.js
    webpack性能优化- lzy loading(懒加载和预加载)
    webpack性能优化- lzy loading(懒加载和预加载)

  2. 懒加载:当文件需要使用时才加载
    webpack性能优化- lzy loading(懒加载和预加载)

    构建后:

    webpack性能优化- lzy loading(懒加载和预加载)

    页面一加载,只有index.js 执行了

    webpack性能优化- lzy loading(懒加载和预加载)
  3. 点击按钮后才会加载 test.js

    webpack性能优化- lzy loading(懒加载和预加载)

  4. 预加载  prefetch:会在使用之前,提前加载 js 文件,等其他资源加载完毕,浏览器空闲了,偷偷加载资源

    webpack性能优化- lzy loading(懒加载和预加载)

    构建后

    webpack性能优化- lzy loading(懒加载和预加载)
    webpack性能优化- lzy loading(懒加载和预加载)

    点击按钮之前就已经全部加载了,重复点击按钮后,不会再加载 test.js

    webpack性能优化- lzy loading(懒加载和预加载)

相关文章:

  • 2021-08-17
  • 2023-03-17
  • 2018-09-28
猜你喜欢
  • 2021-11-29
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-15
  • 2022-12-23
相关资源
相似解决方案