}>

Vue：

js

复制代码

const routes = [

{ path: '/', component: () => import('@/views/Home.vue') },

{ path: '/about', component: () => import('@/views/About.vue') }

];

Tree Shaking摇树优化

Tree Shaking 是一种在打包阶段自动删除未使用代码的优化技术，能让最终文件更小、加载更快。它依赖 ES Module (import/export) 的静态结构来分析哪些代码实际被用到，没用到的就会被"摇掉"。

在 Vite （基于 Rollup）和大多数现代构建工具里，Tree Shaking 在生产构建时是默认开启的，只需要：

使用 ES Module 语法，而不是 require。

避免全局副作用代码，或在 package.json 中声明：

js

复制代码

{ "sideEffects": false }

CDN 加速

CDN 加速就是把网站的静态资源（JS、CSS、图片、字体等）分发到全球多个节点，让用户就近从最近的服务器获取资源，从而减少网络延迟、提高加载速度。

项目中，可以将静态资源（JS、CSS、图片、字体）部署到 阿里云或腾讯云等CDN，让用户从最近的节点获取资源。

减少渲染阻塞

渲染阻塞是指浏览器在解析 HTML 时，遇到某些资源（如 CSS、同步 JS）会暂停页面渲染，直到这些资源加载并解析完成，这会直接延迟首屏显示时间。减少渲染阻塞的核心，就是让关键内容先呈现，非关键资源延后或异步加载。

CSS 优化 ：将首屏必需的 CSS 抽取为关键 CSS直接内联到 HTML，其余样式文件通过 media 属性或延迟加载方式引入。

js

复制代码

JS 优化 ：对非首屏必须执行的 JS 使用 defer 或 async，避免阻塞 HTML 解析。

js

复制代码

字体加载优化 ：使用 font-display: swap，让文字在字体加载前先用系统字体渲染，避免长时间空白。

css

复制代码

@font-face {

font-family: 'MyFont';

src: url('myfont.woff2') format('woff2');

font-display: swap;

}

预加载与预渲染

预加载与预渲染的目标是提前把可能需要的资源或页面准备好，让用户在点击或访问时几乎无等待。

preload：提前加载关键资源（如字体、CSS、首屏图片），确保它们在渲染时已经准备就绪。

js

复制代码

prefetch：利用浏览器空闲时间加载未来可能使用的资源（如下一页的 JS 文件），等真正用到时直接从缓存读取。

js

复制代码

SSR 与 SSG

这两种方式都是在用户请求到达前，就把页面 HTML 准备好，从而减少白屏时间。

SSR（Server-Side Rendering） ：由服务端实时生成 HTML 并返回给浏览器，用户首屏几乎立刻可见，后续由前端接管交互。适合需要动态数据的场景，比如电商、资讯类网站。react中我们可以借助next.js实现这一需求。

SSG（Static Site Generation） ：在构建阶段一次性生成所有静态 HTML 文件，用户访问时直接从服务器或 CDN 获取，速度极快且可离线缓存。适合内容更新不频繁的站点，比如博客、文档站。React 中可以使用 Astro 或 Next.js SSG 模式，Vue 生态中则有 VitePress 和 VuePress 等优秀工具。

Gzip/Brotli 压缩

在服务器端启用 Gzip 或 Brotli 压缩，可以显著减小传输文件的体积，尤其是 JS、CSS、HTML 等文本类资源，通常能减少 60%~80% 的网络传输量。开启Gzip压缩，只需要在vite或webapck中开启配置，并在nginx中配置即可。

依赖共享

在多页面应用（MPA）或微前端场景中，把公共依赖（如 React、Vue、Lodash 等）提取出来，通过 浏览器缓存 或 CDN 共享加载，可以避免重复下载同一依赖，减少首屏加载体积。

Webpack 中可通过 SplitChunksPlugin 配置 vendor 包。

Vite 中可利用 optimizeDeps 或 manualChunks 手动拆分依赖。

运行阶段优化

运行阶段的目标是让页面在交互过程中保持流畅不卡顿，通过优化渲染策略和代码，可以有效减少性能浪费。

避免不必要的重绘与回流

回流（Reflow） ：当元素的大小、位置、布局发生变化时，浏览器需要重新计算布局，并重新渲染页面。

重绘（Repaint） ：当元素外观（如颜色、背景）改变但布局没变时，只需要重新渲染外观

回流是性能杀手，它会引发页面重新计算布局，尤其是在复杂 DOM 结构下，代价非常高。重绘成本低一些，但频繁发生也会卡顿。

虚拟滚动/列表

当你要渲染一个 1 万行的长表格，如果一次性全渲染，浏览器直接卡到怀疑人生。虚拟列表的思路其实很简单只渲染当前可见区域的内容，滚动时替换 DOM 节点，保证 DOM 数量稳定。Vue和React也有很多开源库可以使用。

防抖与节流

防抖 和 节流 都是用来优化高频事件触发的技术，但原理和应用场景不同：

防抖（Debounce）

在事件频繁触发时，只在最后一次触发后 等待一段时间 才执行回调。如果在等待时间内事件又被触发，就重新计时。

适用场景：搜索框输入、窗口大小调整（resize）、表单实时验证等。

节流（Throttle）

在事件频繁触发时，保证 固定时间间隔 内只执行一次回调，即使事件被多次触发也不会更快执行。

适用场景：滚动（scroll）、拖拽（drag）、鼠标移动（mousemove）等。

图片懒加载

在网页加载时，只加载首屏或当前可见区域内的图片，其他图片等用户滚动到可见区域时再加载。这种方式称为图片懒加载，它有以下优点：

减少首屏加载时间，提升页面打开速度

降低首屏网络请求数量，节省带宽

减轻服务器瞬时压力

在HTML 中，原生懒加载写法如下：

js

复制代码

当然，社区也有对应的开源库，如React的react-lazyload，vue的vue-lazyload。

Web Worker 分担计算压力

JavaScript 是单线程运行的，如果在主线程执行复杂计算（如文件解析、加密、压缩），会阻塞 UI 渲染。

Web Worker 允许我们在浏览器中开启一个独立的线程来执行 JavaScript 代码，把耗时、计算量大的任务放在这个线程中执行。

它的常见用途包括：

大量数据计算（加密、解密、数据分析）

图片、视频的压缩与处理

大文件解析（CSV、JSON）

实时数据流处理

注意，它依旧不是传统意义上的多线程。

使用案例：

worker.js

js

复制代码

self.onmessage = e => {

let sum = 0;

for (let i = 0; i < e.data; i++) sum += i;

self.postMessage(sum);

};

📄 App.jsx

js

复制代码

import React from 'react';

export default function App() {

const runWorker = () => {

const worker = new Worker(new URL('./worker.js', import.meta.url));

worker.postMessage(1e8); // 计算 1 亿次

worker.onmessage = e => {

alert(`结果: ${e.data}`);

worker.terminate();

};

};

return 开始计算;

}

内存泄漏监控与优化

内存泄漏会让网页在长时间运行后越来越卡，最终崩溃。常见原因有：

未清理的定时器 / 事件监听

被引用的 DOM 节点未释放

闭包中保留了不必要的变量

优化手段：

使用 Chrome Performance 工具分析内存快照

组件卸载时（React useEffect 返回清理函数 / Vue beforeUnmount）释放资源

构建优化

压缩与混淆

在 React/Vue 等前端项目里，压缩与混淆 基本都是构建工具自动完成的，你几乎不需要手动去配置。

第三方库优化

分包策略

分包策略是指将打包后的代码分成多个 bundle，避免一次性加载所有资源，提高首屏速度。常见策略如按路由分包 、按组件分包 、按依赖分包。它能延迟非必要资源加载，提升首屏加载速度。

被分包的依赖，如第三方库，打包后hash值不变，重新部署会使用缓存文件，也能提升首屏加载速度。

在Vite中，使用它也很简单：

js

复制代码

// Vite Rollup 分包配置

export default {

build: {

rollupOptions: {

output: {

manualChunks: {

react: ['react', 'react-dom'], // 单独打包 react

lodash: ['lodash'] // lodash 单独打包

}

}

}

}

}

懒加载第三方资源

这种方式类似路由懒加载，延迟非关键资源的下载，按需加载第三方库或模块，避免在初始加载时引入全部依赖，减轻首页负担。

js

复制代码

// React 动态导入

const Chart = React.lazy(() => import('./Chart'));

export default function Page() {

return (

Loading...