webpack工程化高级课程_webpack性能优化方案.pdf

webpack性能优化方案

王红元coderwhy

目录

1Babel命令行执行

content

2Babel的底层原理

3浏览器兼容性配置

4babel的配置文件

5babel和polyfill

6React和TS解析

coderwhy如何使用webpack性能优化？

◼webpack作为前端目前使用最广泛的打包工具，在面试中也是经常会被问到的。

◼比较常见的面试题包括：

可以配置哪些属性来进行webpack性能优化？

前端有哪些常见的性能优化？（问到前端性能优化时，除了其他常见的，也完全可以从webpack来回答）

◼webpack的性能优化较多，我们可以对其进行分类：

优化一：打包后的结果，上线时的性能优化。（比如分包处理、减小包体积、CDN服务器等）

优化二：优化打包速度，开发或者构建时优化打包速度。（比如exclude、cache-loader等）

◼大多数情况下，我们会更加侧重于优化一，这对于线上的产品影响更大。

◼在大多数情况下webpack都帮我们做好了该有的性能优化：

比如配置mode为production或者development时，默认webpack的配置信息；

但是我们也可以针对性的进行自己的项目优化；

◼接下来，我们来学习一下webpack性能优化的更多细节。

coderwhy性能优化-代码分离

◼代码分离（CodeSplitting）是webpack一个非常重要的特性：

它主要的目的是将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件；

比如默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页

的加载速度；

代码分离可以分出更小的bundle，以及控制资源加载优先级，提供代码的加载性能；

◼Webpack中常用的代码分离有三种：

入口起点：使用entry配置手动分离代码；

防止重复：使用EntryDependencies或者SplitChunksPlugin去重和分离代码；

动态导入：通过模块的内联函数调用来分离代码；

coderwhy多入口起点

◼入口起点的含义非常简单，就是配置多入口：

比如配置一个index.js和main.js的入口；

他们分别有自己的代码逻辑；

coderwhyEntryDependencies(入口依赖)

◼假如我们的index.js和main.js都依赖两个库：lodash、dayjs

如果我们单纯的进行入口分离，那么打包后的两个bunlde都有会有一份lodash和dayjs；

事实上我们可以对他们进行共享；

coderwhySplitChunks

◼另外一种分包的模式是splitChunk，它底层是使用SplitChunksPlugin来实现的：

因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；

只需要提供SplitChunksPlugin相关的配置信息即可；

◼Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：

比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；

coderwhySplitChunks自定义配置解析

◼Chunks:

默认值是async

另一个值是initial，表示对通过的代码进行处理

