Web 应用优化 - 按需加载资源

1. 按需引入

典型场景：Google Docs 中的正文内容中存在「代码块」 → 按需加载代码块关联的插件脚本。

按需引入常常依赖于开发者的意识，经常被忽略，有时候开发者只需要用到 lodash 中的  isEqual 函数，但却将整个工具库都引入，例如编写了以下代码

import { isEqual } from 'lodash'

如果只需要单独导入，可以采用以下两种方式

// 方式1
import isEqual from 'lodash/isEqual'

// 方式2
import { isEqual } from 'lodash-es';

2. 按设备引入

典型场景：Google Docs 空间首页移动端和 PC 端加载不同资源。

通过区分 PC 和移动端，移动端的用户只需要加载移动端的代码，PC 端的用户只需要加载 PC 端的代码，这样对于能够在不同设备下达到最佳体验。

3. 按权限引入

典型场景：读写权限不同的用户拉取 Google Docs 文档代码。

按权限引入：将用户按权限区分开来，并不是所有的用户都要加载所有的前端代码，只读权限的用户只需要加载「只读权限」的代码，写权限的用户才需要加载「完整」的代码，这样对于拥有只读权限的用户体验更佳。

4. 懒加载

典型场景：Google Docs 文档 → 用户选择插入流程图 → 打开流程图编辑器。

懒加载：对于部分功能代码在需要的时候才进行加载。

懒加载有利于首屏打开时间。Google Docs 文档中一些不常用的功能，对于用户来讲，如果每次打开都去加载对应的代码，无疑是冗余的。通过拆分代码，等到用户需要时或者点击时，再去加载对应的代码。

标签：Web,Docs,代码,用户,isEqual,权限,优化,加载
来源： https://blog.51cto.com/u_15166492/2708134