前端代码分割与懒加载：让你的应用飞起来

前端代码分割与懒加载让你的应用飞起来毒舌时刻代码分割和懒加载听起来就像是前端工程师为了掩饰自己代码写得太烂而发明的借口。你写的代码那么大加载时间那么长不分割能行吗你以为随便分割一下代码就能解决性能问题别做梦了如果分割策略不合理反而会导致更多的网络请求让应用变得更慢。为什么你需要这个减少初始加载时间通过代码分割只加载当前页面所需的代码减少初始加载时间提高用户体验。优化资源利用只加载用户需要的代码避免加载不必要的资源优化内存和带宽使用。提高首屏渲染速度快速加载首屏所需的代码让用户尽快看到页面内容。支持大型应用对于大型应用代码分割可以避免打包后的文件过大导致加载时间过长。反面教材// 这是一个典型的不使用代码分割的应用 import React from react; import ReactDOM from react-dom; import Home from ./pages/Home; import About from ./pages/About; import Contact from ./pages/Contact; import Dashboard from ./pages/Dashboard; import Settings from ./pages/Settings; import UserProfile from ./pages/UserProfile; import AdminPanel from ./pages/AdminPanel; import { BrowserRouter as Router, Routes, Route } from react-router-dom; function App() { return ( Router Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/contact element{Contact /} / Route path/dashboard element{Dashboard /} / Route path/settings element{Settings /} / Route path/user-profile element{UserProfile /} / Route path/admin element{AdminPanel /} / /Routes /Router ); } ReactDOM.render(App /, document.getElementById(root));问题所有页面的代码都打包在一个文件中导致初始加载时间过长即使用户只访问首页也会加载所有页面的代码大型应用的打包文件会变得非常大影响加载速度无法实现按需加载浪费带宽和内存正确的做法React中的代码分割与懒加载// 使用React.lazy和Suspense实现懒加载 import React, { lazy, Suspense } from react; import ReactDOM from react-dom; import { BrowserRouter as Router, Routes, Route } from react-router-dom; // 懒加载页面组件 const Home lazy(() import(./pages/Home)); const About lazy(() import(./pages/About)); const Contact lazy(() import(./pages/Contact)); const Dashboard lazy(() import(./pages/Dashboard)); const Settings lazy(() import(./pages/Settings)); const UserProfile lazy(() import(./pages/UserProfile)); const AdminPanel lazy(() import(./pages/AdminPanel)); // 加载中组件 const Loading () divLoading.../div; function App() { return ( Router Suspense fallback{Loading /} Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/contact element{Contact /} / Route path/dashboard element{Dashboard /} / Route path/settings element{Settings /} / Route path/user-profile element{UserProfile /} / Route path/admin element{AdminPanel /} / /Routes /Suspense /Router ); } ReactDOM.render(App /, document.getElementById(root));Webpack中的代码分割// webpack.config.js module.exports { entry: { main: ./src/index.js, }, output: { filename: [name].[contenthash].js, chunkFilename: [name].[contenthash].chunk.js, }, optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: vendors, chunks: all, }, }, }, }, };基于路由的代码分割// 使用React Router和React.lazy实现基于路由的代码分割 import React, { lazy, Suspense } from react; import { BrowserRouter as Router, Routes, Route, Navigate } from react-router-dom; // 懒加载路由组件 const Home lazy(() import(./pages/Home)); const About lazy(() import(./pages/About)); const Contact lazy(() import(./pages/Contact)); const Dashboard lazy(() import(./pages/Dashboard)); const Settings lazy(() import(./pages/Settings)); const UserProfile lazy(() import(./pages/UserProfile)); const AdminPanel lazy(() import(./pages/AdminPanel)); // 加载中组件 const Loading () ( div classNameloading div classNameloading-spinner/div pLoading.../p /div ); // 错误边界组件 class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error(Error:, error); console.error(Error Info:, errorInfo); } render() { if (this.state.hasError) { return divSomething went wrong. Please try again later./div; } return this.props.children; } } function App() { return ( Router ErrorBoundary Suspense fallback{Loading /} Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/contact element{Contact /} / Route path/dashboard element{Dashboard /} / Route path/settings element{Settings /} / Route path/user-profile element{UserProfile /} / Route path/admin element{AdminPanel /} / Route path* element{Navigate to/ replace /} / /Routes /Suspense /ErrorBoundary /Router ); } export default App;基于条件的代码分割// 基于条件懒加载组件 import React, { lazy, Suspense, useState } from react; // 懒加载重型组件 const HeavyComponent lazy(() import(./HeavyComponent)); function App() { const [showHeavyComponent, setShowHeavyComponent] useState(false); return ( div h1Home Page/h1 button onClick{() setShowHeavyComponent(true)} Load Heavy Component /button {showHeavyComponent ( Suspense fallback{divLoading heavy component.../div} HeavyComponent / /Suspense )} /div ); } export default App;毒舌点评代码分割和懒加载确实能提高应用的性能但我见过太多开发者滥用这个特性导致应用变得更加复杂。想象一下当你为了分割代码而分割代码把原本简单的应用拆分成无数个小模块结果导致网络请求变得更多加载时间反而增加了。这不是得不偿失吗还有那些过度使用懒加载的开发者连一些轻量级的组件也懒加载结果导致用户点击按钮后还要等待组件加载影响用户体验。所以在使用代码分割和懒加载时一定要把握好度。不要为了分割而分割要根据实际情况来决定哪些代码需要分割哪些不需要。当然对于大型应用来说代码分割和懒加载是必不可少的。但对于小型应用过度的代码分割反而会增加开发成本和维护难度。最后记住一句话代码分割和懒加载的目的是为了提高应用的性能和用户体验而不是为了炫技。如果你的代码分割策略导致应用变得更慢那你就失败了。