前端代码按需加载(懒加载)的实现方案

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= window.innerHeight && 
    rect.bottom >= 0
  );
}
window.addEventListener('scroll', () => {
  images.forEach(img => {
    if (isInViewport(img)) {
      img.src = img.dataset.src; // 替换data属性为真实路径
    }
  });
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后停止观察
    }
  });
}, { threshold: 0.1 }); // 设置触发阈值
 
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./Component'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

import { createBrowserRouter } from 'react-router-dom';
const AdminPage = React.lazy(() => import('./AdminPage'));
const router = createBrowserRouter([
  { path: '/admin', element: <AdminPage /> }
]);

// main.js
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif'
});
 
// 组件中
<img v-lazy="imageUrl">

const routes = [
  { path: '/profile', component: () => import('./Profile.vue') }
];

button.addEventListener('click', () => {
  import('./module.js').then(module => module.doSomething());
});

import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {...});