5. 如何优化生产环境的运行性能？

约 1321 字大约 4 分钟

2025-03-15

要优化 Webpack 构建的应用程序性能，可以采取以下措施：

一、webpack 的配置优化

在生产模式下，Webpack 会自动启用一些优化选项，例如：

设置代码拆分策略时，不需要关注并行加载数量、最大体积、最小体积这种配置项，保持默认就行，只配置 chunks: "all" 即可。

我们需要关注的是 cacheGroup 配置项目，主要就是为了把公共的、不常变化的代码打包到一起。

公共代码：主要指 common、util、layout。
Runtime 文件：和公共代码类似，runtime 代码是 webpack 用来处理模块依赖的辅助代码、胶水代码。
第三方依赖（Vendor）：其实就是把 node_module 拆分成多个 Vendor，把诸如 Element-UI、Vue、Loadash 等体积较大的包拆分出来单独打包。
魔法注释：Webpack 提供魔法注释 /* webpackChunkName: "name" */，我们可以用来标记 import() 引入的模块，这样可以给代码拆分后的文件起一个自定义的名称，一般用来标记路由组件、公共组件、第三方库等。

在 避免哈希碰撞 的情况下，对生成的文件采用更复杂 的哈希值生成策略，如 contenthash、chunkhash 等，这样可以有效降低打包的影响范围，从而提高浏览器缓存的利用率，提高缓存的命中率。

我们可以使用preload 和 prefetch 功能来提前加载和推迟加载资源。

Webpack 支持在 import() 中使用魔法注释，来标记需要预加载的资源。一般，我们可以在路由、公共组件、或者用户交互的位置，标记需要预加载的资源。

import(/* webpackPreload: true */ "./moduleA");

非必要情况下，可以关闭，甚至降低 sourceMap 生成 map 文件的精细度 ，可以非常有效的降低代码生成体积，提高加载速度。

渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。

其中最重要的是，在用户 突然离线 时，应用程序能够 继续运行 功能。通过 Service Workers 技术实现的。

引入公共组件时，按需引入需要的部分，这样 webpack 会在打包带时候将未引入的部分剔除

import { funA } from "./Module";

封装组件的时候，尽量降低文件的副作用，配合/*#__PURE__*/标记函数，配合 Tree Shaking 无副作用移除代码

const result = /*#__PURE__*/ someFunction();

路由或组件的懒加载可以配合缓存和代码拆分

雪碧图： 样式有关的小尺寸图片，比如图标， 合并成一张大图片 ，在 css 中用偏移量去控制。这样可以利用浏览器缓存来减少 http 请求数量。
静态资源服务器、CDN： 可以考虑使用静态资源服务器或 CDN 服务器，将大体积的图片和视频上传，在代码中使用 URL 地址 去引入资源。

以下资源可以使用 CDN 加速，来提高加载速度，但是要控制数量，避免大幅度增加 Http 请求数量

2025/8/24 08:17

查看所有更新日志