如何用require.context实现长尾词预加载的优雅改写？

本文共计962个文字，预计阅读时间需要4分钟。

目录+前言+陋习的预加载+单张预加载+多张预加载+优雅的预加载+require.context+前言+在前端开发中，对页面+花瓣网[选项1]+要求页面，用到的图片、视频什么的就越多，就越…

目录

• 前言
• 丑陋的预加载
• 单张预加载
• 多张预加载
• 优雅的预加载
• require.context

前言

在前端开发中，对页面花里胡哨度[注1]要求越高的页面，用到的图片、音频什么的就越多，比如什么结婚请柬、展会请柬、发布会宣传页、数据大屏。虽然现在浏览器不允许网页在没有用户交互的情况下播放音频，但是，我们依旧要在页面展现的同时，准备好所有的静态资源。

注1：花里胡哨度（garish degree），又名难做指数，江湖人称领导开心点

丑陋的预加载

预加载即提前加载，浏览器在请求一张图片时，会缓存到本地，在下次请求同样的地址时，会直接在本地缓存读取（304），在本地读取的时间基本可以忽略不计。