前端性能优化 — 全流程优化（千字干货） - 网站源码_资源分享

公交站点新体验：幸福家庭网络营销

全文

责任编辑主要展述webpack装箱强化，如工程项目非webpack工程项目可跳至产品目录“全业务流程强化”开始写作。

工程项目大背景

幸福家庭网络营销工程项目采用Taro v3.0.8钢架(webpack4)展开装箱，工程项目大背景由同一个套标识符装箱聚合两套工程项目透过nginx全权到相同搜索引擎下，全业务流程构筑布署费时太长进而展开全业务流程预测展开前瞻性强化。

在强化前，他们需要先找寻操控性困局在哪，预测最小表面积或是最小费时的部份再展开优化实用性，最终目标取向提升OKR。

装箱预测

1.装箱操作过程预测

webpack能将多种类型的天然资源，包括相片、css、js等，转录、女团、堆叠、聚合 JS 文件格式的bundler文档。透过文本切换+天然资源分拆校对。透过开发人员撰写标识符组件，webpack透过装箱校对切换出标识符chunk, 再将能相连接的chunk重新分配到同一个bundle中，webpack处置输入可在应用程序运转的文档bundle。

透过将巨大的管理体系抽象化为三各方面的科学知识：

构筑的核心理念业务流程：调用期 – 构筑期 – 聚合期loader的促进作用 plugin构架与实用性

该文弄懂webpack核心理念基本原理

贮备了专业科学知识，返回工程项目大背景，他们的工程项目采用多出口处装箱文档，装箱四次聚合四份动态天然资源等候采用，同一个构筑业务流程下这儿有强化的内部空间呢？

2.功能定位webpack装箱慢的其原因

强化能从两各方面作为突破口，科学合理展开预测, 是标识符表面积过大造成校对工作量大还是装箱中loader或是插件加载造成的费时太长，现有很多预测工具或插件：

速度预测：speed-measure-webpack-plugin

他们的工程项目装箱采用的是凹凸框架Taro，本身是基于webpack展开封装的，所以很多webpack SDK被重写了，能参考官方撰写插件思路，校对时的标识符可在源码中展开硬编码，或是采用官方玩法展开扩展。

这里是引入了speed-measure-webpack-plugin。该插件能统计出校对装箱操作过程中，plugin 和 loader 的费时情况，能帮助他们明确强化方向。

实用性好插件，执行构筑命令，输入结果如下图：

表面积预测：webpack-bundle-analyze传送门

两种实用性都能将构筑后的各部份组成数据用可视化的方式呈现出来，能让你清楚的看到组件的组成与费时，对于预测工程项目依赖有很大的帮助。

强化方案与思路

1) 具体工程项目前瞻性预测，拆包、预测代码减少不必要的天然资源消耗构筑。

预测标识符组件表面积，举个栗子从装箱表面积预测图排查出最小两个包mapvgl包表面积占比过大，能从按需加载入手展开强化；erdua为手机端调试工具，他们装箱聚合的三个工程项目，一个是设计器中的移动端预览界面所以无需手机调试工具可去除，同理装箱聚合的sourcemap用于调试的文档也可去除。

2) 利用webpack本身提供的强化能力展开效率提升。

缓存与并行是展开操控性强化的两个很重要的切入角度，webpack强化主要为以下几个各方面，这里着重讲几个用法

⭐️分包，实用性增量构筑，插件： webpack-dev-server或webpack-dev-middleware透过设置watch模式与cache模式，增量构筑之所以快是因为将构筑所需的数据（项⽬⽂件、node_modules 中的⽂件数据、历史构筑后的缓存数据等）都保留在内存中。在 watch 模式下保留着构筑使⽤的 Node 进程，使得下⼀次构筑时能直接读取内存中的数据。⭐️DllPlugin⭐️标识符压缩，webpack-parallel-uglify-plugin、terser-webpack-plugin插件，简单说一下两个基本原理⭐️⭐️⭐️ （并行）多线程进程装箱，插件：thread-loader 、happypackthread-loader将 thread-loader 放置在其他 loader 之前，放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运转。仅在费时loader展开此实用性否则可能反向实用性。

算

进程开启费时⭐️⭐️⭐️ (缓存）缓存插件: hardSourceWebpackPlugin 、 cache-loader 缓存利刃一把梭。harsourceWebpackPlugin简单的实用性即可达到质的飞跃（webpack5已内置），但是任何缓存存在两面性。

const HardSourceWebpackPlugin = require(hard-source-webpack-plugin) //…chain.plugin(HardSourceWebpackPlugin) .use(HardSourceWebpackPlugin, []) .end()

cache-loader 从速度预测结果可预测耗时最长为babel-loader, 利用cache-loader前瞻性对loader展开缓存。注意：cache-loader缓存于 /node_modules/.cache/cache-loader ，注意每次装箱是否缓存文档递增，是否会占用磁盘内存。babel-loaderbabel-loader | webpack 中文文档cacheDirectory开启缓存，和cache-loade缓存存储同理。官网关于缓存合适会更换文档和相应实用性的描述。假设是缓存文档是递增的其实能透过实用性node_module缓存机制规避这个问题，设计node_modules跟随相同维度展开缓存与更新（比如分支，或环境）。

强化效果如下：

全业务流程强化

综上只是预测了装箱构筑环节，工程项目完整的CI-CD业务流程如下：

透过预测费时，他们工程项目装箱构筑费时组成为（采集数据由同机子同网络情况下采集五次数据均值）：

拉取镜像（2m）-> 安装包（2m受网络波动严重）-> 校对装箱（4-7m) -> 构筑布署（1m)

总费时平均值在 8-9分钟

再脱离本身工程项目来聊聊，全业务流程思考选型、强化

安装包、拉取镜像：存在相同特点文档变动频率低，初次拉取时是否能加速？再次拉取时是否能利用缓存？开发环境校对装箱：费时预测，从上述的webpack装箱强化作为方向正式环境校对装箱：可从流水线作为突破口，强化方向是否能走实用性化

装箱框架选型

先来说说Webpack的构筑业务流程，webpack在启动时会先构筑工程项目锁依赖的组件，当修改了某个组件，会对该组件依赖重新预测展开装箱。webpack官方也提供了插件实用性供开发人员自行实用性强化。最新webpack5和taro新版本已经集成了旧版webpack很多插件强化功能。

那么 Webpack 和 Vite 对比有什么可比性？

从功能定位来说两者就是不一样的：webpack core 是一个纯装箱工具（对标 Rollup），而 Vite 其实是一个更上层的工具链方案，对标的是（webpack + 针对 web 的常用实用性 + webpack-dev-server）。

vite 开发期采用的是unbundle模式，采用esbuild做依赖预构筑，转录jsx、ts、tsx等。

为什么没有可比性？

语言优势：webpack底层还是js语言（边运转边解释）的语言；但是esbuild是用go语言（多线程支持持，多线程共享内存）撰写的，在cpu密集的场景下，go语言更有优势，能对cpu充分利用。本质相同：webpack 的本质就是先装箱，再加载。webpack-dev-server 只是一个在内存里用 webpack 装箱的服务器而已；vite本质是启动了一个服务，当标识符更新时对标识符展开拦截处置，利用应用程序对ESM的支持，当 import 组件时，应用程序就会下载被导入的组件。先启动开发服务器，当标识符执行到组件加载时再请求对应组件的文档, 本质上实现了动态加载。实用性方式相同：vite模拟的是rollup的插件机制本身已经内置很多默认强化，降低实用性难度。webpack的 loader/插件机制在相同场景下采用更灵活但同时增加了开发成本。