从代码分割到内存管理全面解析JavaScript性能优化技术

// 路由配置中使用懒加载
import React, { lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const UserProfile = lazy(() => import('./routes/UserProfile'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>加载中...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/profile" component={UserProfile} />
        </Switch>
      </Suspense>
    </Router>
  );
}

// package.json
{
  "name": "my-app",
  "sideEffects": false
}

// 如果只使用了Button组件，则Modal组件的代码将被移除
import { Button, Modal } from 'antd';

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

// 图片懒加载
const LazyImage = ({ src, alt }) => {
  const [isVisible, setIsVisible] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    });
    observer.observe(imgRef.current);
  }, []);

  return <img ref={imgRef} src={isVisible ? src : ''} alt={alt} />;
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataSet });
worker.onmessage = (e) => {
  console.log('计算结果：', e.data);
};

// worker.js
self.onmessage = (e) => {
  const result = e.data.data.map(item => item * 2); // 复杂计算
  self.postMessage(result);
};

// 防抖：用户停止输入500ms后才执行搜索
const debouncedSearch = debounce((query) => {
  fetchSearchResults(query);
}, 500);

// 节流：滚动事件每200ms最多触发一次
const throttledScroll = throttle(() => {
  console.log('滚动位置：', window.scrollY);
}, 200);

// React 18并发渲染
ReactDOM.createRoot(root).render(<App />);

// 错误示例：事件监听未移除
useEffect(() => {
  window.addEventListener('resize', handleResize);
  // 缺少清理函数
}, []);

// 正确做法
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

// 使用TypedArray处理图像像素数据
const buffer = new Uint8Array(imageData);
for (let i = 0; i < buffer.length; i++) {
  buffer[i] = buffer[i] * 2; // 快速操作
}