Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support lazy import #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

fengzilong
Copy link

@fengzilong fengzilong commented Oct 21, 2021

closes #9

合入这个 PR 后,原先的用法保持不变

import { setupAppear } from 'appear-polyfill'

setupAppear()

同时支持一种新的使用方式

import { useEffect } from 'rax'
import inject from 'appear-polyfill/lib/inject'

inject() // inject 函数体积很小

export default function Page() {
  useEffect( () => {
    // 延迟加载,首屏节省约 25KB(数据来源 https://unpkg.com/browse/appear-polyfill@0.1.2/lib/,未压缩/无 Gzip)
    import( 'appear-polyfill/lib/setup' ).then( mod => mod.default() )
  }, [] )
}

适用于所有用了 appear-polyfill 的页面

可以基于新的方式封装一个 hook api

@chenjun1011
Copy link
Contributor

担心的一个点是:延迟、并且单独加载 setup 的脚本,有可能造成图片上屏和曝光埋点的延迟

或许默认不引入 IntersectionObserver Polyfill,这个 polyfill 和其他 polyfill 一起,只在需要浏览器环境才下发,使用上和逻辑上会更简单点?

@fengzilong
Copy link
Author

刚刚想到一个点,不知道曝光埋点的采样率是不是 100% 的,对于不需要上报的访问采用懒加载,这也是一种思路

或许默认不引入 IntersectionObserver Polyfill,这个 polyfill 和其他 polyfill 一起,只在需要浏览器环境才下发

这个也可以的,主要的体积都在 IntersectionObserver polyfill 上,需要发一个 breaking 版本

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

支持延迟加载 appear-ployfill
2 participants