WebPack优化打包

 webpack 打包优化 目标

• 减小打包后的文件大小
• 首页按需引入文件，减少白屏时间
• 优化 webpack 打包时间

优化实现

分析webpack 打包性能

• webpack-bundle-analyzer 分析体积

• 测量构建时间

我们可以通过 speed-measure-webpack-plugin 测量你的 webpack 构建期间各个阶段花费的时间。

按需加载

• 路由组件按需加载
• 第三方组件和插件 ==> 按需加载需引入第三方组件
• 去除打包后文件的预加载 prefetch/preload

vuecli 3 默认开启 prefetch(预先加载模块)

• • prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源
  • preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源

• 对于一些体积比较大 且使用场景比较少的 组件，可以采用异步导入的方式来使用 ===> import()

缩小构建目标

优化 loader 配置

排除 Webpack 不需要解析的模块，即使用 loader 的时候，在尽量少的模块中去使用。

• 优化正则匹配
• 通过 cacheDirectory 选项开启缓存
• 通过 include、exclude 来减少被处理的文件。

注意：保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。

合理使用 resolve.extensions

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在，查询的顺序是按照我们配置 的 resolve.extensions 顺序从前到后查找，Webpack 默认支持的后缀是 js 与 json。

配置别名 alias

alias 的意思为 别名，能把原导入路径映射成一个新的导入路径，我们可以使用 alias 配置来减少查找过程

使用 module.noParse

让 webpack 忽略对部分没采用模块化的文件的递归解析处理，这样做的好处是能提高构建性能。 因为如 jQuery、echart 等库庞大又没有采用模块化标准，让 webpack 去解析这些文件耗时又没有意义。

===>

是防止 webpack 解析那些任何与给定正则表达式相匹配的文件

生产环境关闭 sourceMap

sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。 在生产环境，打包速度减慢，生产文件变大，所以开发环境使用 sourceMap，生产环境则关闭。

提取公共代码

webpack的splitChunks

a 引入 b

c 引入 b

将公共代码进行提取，webpack在打包时，a文件引入b文件，最终会将a，b文件代码打包到一起，如果某一个文件在很多文件中使用会被重复打包

• chunks：提取方式，同步引入还是异步引入 

• • all：不管同步（import a from ‘a’）还是异步（import（a））都提取一个文件
  • initial：区分，同步使用了，异步也使用了，提取两次
  • async：只提取异步加载的模块

• cacheGroups：配置提取方案 

• • name：生成的名字
  • test：匹配的路径或资源名称
  • chunks：单独进行chunks
  • priority：优先级，数越大，优先级越高
  • reuseExistingChunk：如果要提取的模块已存在直接复用
  • minChunks：最小引用次数

===> webpack的splitChunks 分包，提取公共代码，减少代码体积。

CDN 优化

像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

• webpack排除打包

• 将cdn服务器上的地址 注入 到模板中

• 或者 也可以利用 html-webpack-plugin将CDN 注入到模板中

启用 gzip 压缩

使用 Gzip 两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间

runtimeChunk

runtimeChunk 作用 把异步从主模块 抽离 ===> 异步  import () ==> 用到时候 我才会把资源引入进来

该异步代码的时候 主模块的后缀名不会改变  可以直接使用浏览器缓存 提高网站的性能

runtime 运行时：异步加载的代码，import() => {} ===> 这些运行时的代码一般都是从主模块分离出去的

当不设置runtimeChunk时，运行时代码发生变化，哪怕代码没有发生变化，重新打包

打包​​​​​​​

修改某个路由文件代码

会发现文件的hash值发生变化，此时会导致浏览器无法使用缓存，也就会导致缓存失效

开启runtimeChunk

打包

修改代码重新打包

hash值没有发生变化，app可以继续使用浏览器缓存，但是会生成runtime代码，是会变化的，每次还是需要发送请求，但是该文件比较小

script-ext-html-webpack-plugin

打包时生成一个体积很小runtime.xxx.js文件，用作映射其他chunk文件，目的是更新后，以较小的代价利用缓存，提升页面加载速度。 可以利用script-ext-html-webpack-plugin将runTime代码生成到行内

可以使用配置项 runtimeChunk 将运行时代码，从主模块分离出来, 更好的缓存代码。

利用插件script-ext-html-webpack-plugin插件，将runTime代码生成到行内。

tree-shaking

Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。

列子：util.js

main.js 源码：

Tree Shaking 后的 util.js：

​​​​​​​

由于只用到了 util.js 中的 funcA，所以剩下的都被 Tree Shaking 当作死代码给剔除了。

配置1.设置vue.config.js

设置package.json

Tree Shaking | webpack 中文文档 | webpack 中文文档 | webpack 中文网

多进程解析和处理文件

由于运行在 Node.js 之上的 webpack 是单线程模型的，所以 webpack 需要处理的事情需要一件一件的做，不能多件事一起做。当 webpack 需要打包大量文件时，打包时间就会比较漫长。

HappyPack

HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。要注意的是 HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。

使用方法如下：

• HappyPack 插件安装

• 在生产环境 webpack.prod.conf.js 文件进行配置

注意，当项目较小时，多线程打包反而会使打包速度变慢。

或者

​​​​​​​