好了，各位观众老爷们，今天咱们聊聊前端性能优化里的两大利器：代码分割（Code Splitting）和懒加载（Lazy Loading）。这俩哥们儿，一个负责“分家”，一个负责“拖延”，合在一起，就能让你的网页首屏加载速度嗖嗖地往上涨，用户体验立马提升好几个档次。
开场白：首屏加载速度的重要性
话说回来，为啥我们要如此重视首屏加载速度呢？很简单，现在的用户都很急，网页打开慢了，直接关掉走人，谁有空等你慢慢加载？Google 的研究表明，如果网页加载时间超过 3 秒，就有 53% 的用户会选择离开。这可不是闹着玩的，直接影响你的用户留存率、转化率，甚至直接影响你的钱包！
所以，优化首屏加载速度，绝对是一件值得投入时间和精力的事情。而代码分割和懒加载，就是优化首屏加载速度的有效手段。
代码分割 (Code Splitting)：化整为零，各个击破
想象一下，你的 JavaScript 代码就像一个巨大的蛋糕，包含了网站所有的功能。如果用户第一次访问你的网站，就要把整个蛋糕都吃下去，那得多费劲？代码分割，就是把这个大蛋糕切成小块，用户只需要吃他需要的那一块就行了。
代码分割的本质： 将一个大的 JavaScript 包拆分成多个小的包，按需加载。
为什么要代码分割？
- 减少初始下载量： 用户只需要下载当前页面需要的代码，减少了不必要的资源请求。
- 提高缓存利用率： 修改一个小的模块，只需要重新下载这个模块，其他模块可以继续使用缓存。
- 提升页面响应速度： 减少了 JavaScript 的解析和执行时间，页面可以更快地响应用户的交互。
代码分割的方式：
-
基于路由的代码分割： 这是最常见的代码分割方式。根据不同的路由，加载不同的模块。例如，
首页、用户中心、商品详情页，每个页面对应一个单独的 JavaScript 包。实现方式（以 React + React Router +
React.lazy为例）：import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; // 使用 React.lazy 懒加载组件 const Home = React.lazy(() => import('./pages/Home')); const UserProfile = React.lazy(() => import('./pages/UserProfile')); const ProductDetail = React.lazy(() => import('./pages/ProductDetail')); function App() { return ( <Router> <Suspense fallback={<div>Loading...</div>}> {/* fallback 组件用于在加载时显示 */} <Switch> <Route exact path="/" component={Home} /> <Route path="/profile" component={UserProfile} /> <Route path="/product/:id" component={ProductDetail} /> </Switch> </Suspense> </Router> ); } export default App;解释：
React.lazy(() => import('./pages/Home'))：React.lazy接受一个函数，这个函数需要调用import()方法来动态引入模块。import()返回一个 Promise，当 Promise resolve 时，组件才会被加载。<Suspense fallback={<div>Loading...</div>}>：Suspense组件用于包裹懒加载的组件，并提供一个fallback属性，用于在组件加载时显示一个占位符。-
Webpack 配置 (webpack.config.js):
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 用于生成 HTML 文件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 用于清理 dist 目录 module.exports = { mode: 'development', // 开发模式 entry: './src/index.js', // 入口文件 output: { filename: '[name].bundle.js', // 输出文件名，使用 [name] 占位符，Webpack 会自动根据入口文件名生成对应的文件名 path: path.resolve(__dirname, 'dist'), // 输出目录 publicPath: '/', // 用于指定静态资源的 URL 前缀，例如图片、CSS、JavaScript 等 }, devtool: 'inline-source-map', // 用于生成 source map，方便调试 devServer: { contentBase: './dist', // 指定开发服务器的静态资源目录 hot: true, // 启用热更新 historyApiFallback: true, // 用于支持单页应用，当访问不存在的路由时，会重定向到 index.html }, module: { rules: [ { test: /.css$/i, use: ['style-loader', 'css-loader'], }, { test: /.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, { test: /.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, ], }, plugins: [ new CleanWebpackPlugin(), // 清理 dist 目录 new HtmlWebpackPlugin({ // 生成 HTML 文件 title: 'Code Splitting Example', template: './public/index.html', // 使用 public/index.html 作为模板 }), ], optimization: { moduleIds: 'deterministic', // 使 module id 更加稳定，避免 vendor chunk 的 hash 发生变化 splitChunks: { cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, // 将 node_modules 中的模块打包到 vendor chunk 中 name: 'vendors', chunks: 'all', }, }, }, }, };注意: 你需要安装相应的依赖：
npm install react react-dom react-router-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin clean-webpack-plugin --save-dev
-
基于组件的代码分割： 对于一些大型的组件，可以将其拆分成多个小的模块，按需加载。例如，一个复杂的表单组件，可以将其拆分成多个小的表单字段组件，只有当用户需要填写某个字段时，才加载对应的组件。
实现方式（以 React 为例）：
import React, { Suspense } from 'react'; const ExpensiveComponent = React.lazy(() => import('./ExpensiveComponent')); function MyComponent() { return ( <div> Some content <Suspense fallback={<div>Loading...</div>}> <ExpensiveComponent /> </Suspense> </div> ); } export default MyComponent;解释： 和路由分割类似，只不过这次是对组件进行懒加载。
-
基于功能的代码分割： 将一些不常用的功能模块拆分成单独的包，只有当用户需要使用这些功能时，才加载对应的模块。例如，一个网站的评论功能，可以将其拆分成一个单独的 JavaScript 包，只有当用户点击“查看评论”按钮时，才加载这个包。
实现方式（以动态
import()为例）：async function loadComments() { const commentsModule = await import('./comments'); commentsModule.renderComments(); // 假设 comments 模块导出一个 renderComments 函数 } document.getElementById('show-comments-button').addEventListener('click', loadComments);解释： 当用户点击“显示评论”按钮时，
loadComments函数会被调用。该函数使用import()动态引入comments模块，并调用renderComments函数来渲染评论。 -
Vendor 分割： 将第三方库（例如 React、Lodash 等）打包成一个单独的包，利用浏览器缓存，避免重复下载。 Webpack 默认会进行 Vendor 分割，可以通过配置
optimization.splitChunks来进行更细粒度的控制。Webpack 配置：
module.exports = { // ... 其他配置 optimization: { splitChunks: { cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', chunks: 'all', }, }, }, }, };解释： 这段配置会将
node_modules目录下的所有模块打包到一个名为vendors的 chunk 中。
代码分割的工具：
- Webpack: 最流行的 JavaScript 打包工具，支持各种代码分割策略。
- Rollup: 另一个流行的 JavaScript 打包工具，更适合打包库。
- Parcel: 零配置的 JavaScript 打包工具，上手简单。
总结： 代码分割就像一个精明的理财师，把你的代码资产进行合理的分配，让你的网站运行得更快更流畅。
懒加载 (Lazy Loading)：能拖就拖，延迟加载
懒加载，顾名思义，就是“偷懒”，延迟加载那些不是立即需要的资源。就像你去餐厅吃饭，菜单上的菜很多，但你不可能一口气全点完，而是先点几个开胃菜，等吃完了再点主菜。
懒加载的本质： 延迟加载页面上的资源，直到它们真正需要被使用时才加载。
为什么要懒加载？
- 减少初始加载时间： 避免一次性加载所有资源，减少了初始 HTTP 请求的数量和资源大小。
- 节省带宽： 避免加载用户可能永远不会看到的资源，节省了用户的带宽。
- 提升页面性能： 减少了 JavaScript 的解析和执行时间，页面可以更快地响应用户的交互。
懒加载的方式：
-
图片懒加载： 这是最常见的懒加载方式。延迟加载页面上的图片，只有当图片滚动到可视区域时才加载。
实现方式（使用
Intersection Observer API）：<img data-src="image.jpg" alt="Image" class="lazy-load">const lazyImages = document.querySelectorAll('.lazy-load'); function loadImage(image) { image.src = image.dataset.src; image.classList.remove('lazy-load'); } if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { loadImage(entry.target); observer.unobserve(entry.target); // 停止观察已加载的图片 } }); }); lazyImages.forEach(image => { observer.observe(image); }); } else { // 如果浏览器不支持 Intersection Observer API，则直接加载图片 lazyImages.forEach(loadImage); }解释：
data-src属性：用于存储图片的真实 URL。Intersection Observer API： 用于监听元素是否进入可视区域。- 当图片进入可视区域时，
loadImage函数会被调用，将data-src属性的值赋给src属性，从而加载图片。 observer.unobserve(entry.target)： 停止观察已加载的图片，避免重复加载。
另一种简单方式（使用 JavaScript 库）：
有很多 JavaScript 库可以简化图片懒加载的实现，例如：
- LazySizes: 一个轻量级的、高性能的图片懒加载库。
- lozad.js: 另一个流行的懒加载库，使用简单。
-
视频懒加载： 类似于图片懒加载，延迟加载页面上的视频，只有当视频滚动到可视区域时才加载。
实现方式： 和图片懒加载类似，只是需要修改 HTML 标签和 JavaScript 代码。
-
iframe 懒加载： 延迟加载页面上的 iframe，例如嵌入的 YouTube 视频、Google Maps 等。
实现方式： 和图片懒加载类似，只是需要修改 HTML 标签和 JavaScript 代码。
-
JavaScript 模块懒加载： 延迟加载页面上的 JavaScript 模块，只有当需要使用这些模块时才加载。
实现方式： 可以使用
import()动态引入模块，或者使用Webpack的代码分割功能。
懒加载的注意事项：
- SEO： 确保搜索引擎能够抓取到懒加载的内容。可以使用
noscript标签提供内容的备选项。 - 用户体验： 在资源加载时，显示一个占位符或加载动画，避免用户感到困惑。
- 性能： 避免过度使用懒加载，否则可能会导致页面出现卡顿现象。
总结： 懒加载就像一个精打细算的管家，把你的资源安排得井井有条，让你的网站运行得更流畅更省电。
代码分割 vs 懒加载：哥俩好，一起上
代码分割和懒加载虽然都是为了优化首屏加载速度，但它们的侧重点不同：
- 代码分割： 侧重于拆分代码，将一个大的 JavaScript 包拆分成多个小的包，按需加载。
- 懒加载： 侧重于延迟加载资源，只有当资源需要被使用时才加载。
在实际项目中，通常会将代码分割和懒加载结合使用，以达到最佳的优化效果。
案例：
假设你的网站有一个商品详情页，包含了以下内容：
- 商品基本信息（名称、价格、图片等）
- 商品描述
- 商品评价
- 相关商品推荐
你可以采用以下策略进行优化：
- 代码分割： 将商品基本信息、商品描述、商品评价、相关商品推荐分别打包成单独的 JavaScript 模块。
- 懒加载：
- 延迟加载商品评价模块，只有当用户点击“查看评价”按钮时才加载。
- 延迟加载相关商品推荐模块，只有当用户滚动到页面底部时才加载。
- 使用图片懒加载技术，延迟加载商品图片。
通过以上策略，可以显著减少商品详情页的初始加载时间，提升用户体验。
总结：性能优化，永无止境
代码分割和懒加载是前端性能优化的重要手段，但它们并不是万能的。除了代码分割和懒加载，还有很多其他的性能优化技巧，例如：
- 压缩代码： 使用工具（例如 UglifyJS、Terser）压缩 JavaScript、CSS、HTML 代码，减少文件大小。
- 开启 Gzip 压缩： 在服务器端开启 Gzip 压缩，减少 HTTP 响应的大小。
- 使用 CDN： 将静态资源（例如 JavaScript、CSS、图片）部署到 CDN 上，利用 CDN 的缓存和加速功能。
- 优化图片： 使用合适的图片格式（例如 WebP），压缩图片大小，使用响应式图片。
- 减少 HTTP 请求： 合并 CSS、JavaScript 文件，使用 CSS Sprites，减少 HTTP 请求的数量。
- 利用浏览器缓存： 设置合适的 HTTP 缓存策略，利用浏览器缓存静态资源。
- 避免重排和重绘： 优化 JavaScript 代码，避免频繁的重排和重绘操作。
性能优化是一个持续不断的过程，需要根据实际情况进行调整和优化。希望今天的分享能够帮助大家更好地理解代码分割和懒加载，并将其应用到实际项目中，提升网站的性能和用户体验。
好了，今天的讲座就到这里，感谢各位观众老爷的观看！如果大家有什么问题，欢迎在评论区留言，我会尽力解答。