通过webpack偷偷搞点事情：优化加载速度与资源缓存

2024-02-09 00:12:02

前言

随着项目的迭代，项目的代码量越来越大，客户端访问速度越来慢，此时webpack在优化打包体积和配合浏览器进行资源缓存上起到很大作用。众所周知webpack打包最终会通过output输出到指定目录下指定的文件名filename，如果filename写死成某个文件名，例如index.js，每次打包都会输出到同一个文件名，那么浏览器根本就不会认为这是一个新版本的文件，从而一直从自己的缓存中读取已经存在的文件，导致无论我们项目改了什么，浏览器都不会加载更新后的文件。

一、webpack构建输出配置

在webpack中output的属性主要有以下几个：

// 配置webpack构建后的输出配置
output:{
    filename: '[name].js', // entry中的哪个entry，就输出哪个文件
    path: path.resolve(__dirname, '../dist'), // 输出的目录
    publicPath: '/'  // 资源前缀路径
}

publicPath：控制所有静态资源和webpack编译生成文件的路径前缀。可自定义资源访问的域名。例如如果配置的是publicPath: '/public/'，那么在构建后所有的静态资源以及webpack构建的资源都会自动加上此路径前缀，服务器或CDN在返回静态资源文件或webpack构建的资源文件时，也会使用此路径前缀。因此，对于静态资源，publicPath相当于项目的静态资源访问的基础路径，对于webpack构建的资源，publicPath相当于webpack构建后的资源的CDN的基础路径。

filename：构建后输出的文件名，默认就是main.js。可以根据文件的不同来指定不同的文件名，例如可以根据entry进行配置，不同entry生成的最终文件名也不同，就像上文代码所示。

二、webpack优化打包体积

webpack作为模块化的打包工具，会将依赖的模块都解析出来，并打包到一个文件中。随着项目越来越大，依赖的模块也越来越多，最终打包出来的体积就越来越大。打包体积大自然就会影响到最终文件的下载时间。

1. 代码拆分

webpack提供了代码拆分（Splitting Code）的功能，可以将项目中相互独立的部分拆分成多个文件。这可以减少主文件的体积，从而加快加载速度。代码拆分的方法主要有以下两种：

按需加载（Code Splitting）：webpack会将需要加载的模块封装成一个单独的文件，当需要的时候再加载。这可以减少主文件的体积，并提高加载速度。使用webpack的import()语法可以实现按需加载。
代码分割（SplitChunks）：webpack会根据模块之间的依赖关系，将它们分割成不同的代码块。这可以减少主文件的体积，并提高加载速度。使用webpack的optimization.splitChunks属性可以实现代码分割。

2. Tree Shaking

Tree Shaking是webpack的一项特性，可以自动删除那些未被使用的代码。这可以减少主文件的体积，并提高加载速度。Tree Shaking是通过静态分析来实现的，它可以自动检测出那些未被使用的代码。Tree Shaking只对ES模块有效，不能对CommonJS模块使用。

3. Scope Hoisting

Scope Hoisting是webpack的一项特性，可以将那些只在某个模块中使用的代码提升到该模块的顶部。这可以减少主文件的体积，并提高加载速度。Scope Hoisting是通过静态分析来实现的，它可以自动检测出那些只在某个模块中使用的代码。

4. 使用CDN

CDN（Content Delivery Network）是一种将内容分发到多个位置的网络，以便用户可以从最近的位置获取内容。这可以减少加载时间，并提高加载速度。

三、利用浏览器缓存加速资源加载

浏览器缓存是一种将资源存储在本地的一种机制。当浏览器再次请求同一个资源时，它会先检查本地缓存中是否有该资源。如果有，则直接从本地缓存中加载，否则才从服务器加载。这可以减少加载时间，并提高加载速度。

1. 缓存策略

浏览器缓存有很多种策略，最常见的有以下几种：

强制缓存：浏览器会一直从本地缓存中加载资源，不会向服务器发送请求。
验证缓存：浏览器会向服务器发送请求，但只检查资源是否被修改过。如果资源没有被修改过，则直接从本地缓存中加载，否则才从服务器加载。
协商缓存：浏览器会向服务器发送请求，并协商资源是否被修改过。如果资源被修改过，则从服务器加载，否则直接从本地缓存中加载。

2. 缓存头

缓存头（Cache Headers）是一种用于控制浏览器缓存行为的HTTP头。最常见的缓存头有以下几种：

Expires：指定资源的过期时间。当资源过期后，浏览器将从服务器加载资源。
Cache-Control：指定资源的缓存行为。最常用的值有以下几个：
- max-age=0：禁止缓存。
- max-age=3600：缓存资源3600秒（1小时）。
- no-cache：不使用缓存。
- no-store：不存储资源。

3. 利用webpack配置浏览器缓存

webpack可以通过output的publicPath属性来设置资源前缀路径，通过optimization的splitChunks属性来配置代码分割，通过optimization的minimizer属性来配置优化器，通过optimization的runtimeChunk属性来配置运行时代码的提取。通过这些配置可以优化打包体积，加快资源的加载速度。