webpack高级篇

深碍√TFBOYSˉ_ 2023-09-28 08:48 64阅读 0赞

**目录**

前言：

1.提升开发体验

1.1 是什么？

1.2 为什么？

1.3 怎么用

2.提升 webpack 提升打包构建速度

3.减少代码体积

4.优化代码运行性能

--------------------

### 前言： ###

> **webpack高级使用主要围绕几个方面：**
> 
>  **1.提升开发体验**
> 
>  **2.提升打包构建速度** 
> 
>  **3.减少代码体积** 
> 
>  **4.优化代码运行性能**

**这部分的知识很重要，是前端性能优化的重要组成部分，也是面试的高频考点。**

**注：webpack几乎所有的配置流程都一样，既：去官网（中文翻译网站经常有错误！）先下载包，然后去config里面配置就完事，本文对此稍作演示，其他请自行查阅配置。**

--------------------

### 1.提升开发体验 ###

> #### 使用 `Source Map` 让开发或上线时代码报错能有更加准确的错误提示。 ####

#### 1.1 是什么？ ####

> SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
> 
> 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

#### 1.2 为什么？ ####

开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：

![ec309889e0d3435fa4eb84800c5149c2.png][]

> 所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。
> 
> 所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。

#### 1.3 怎么用 ####

> #### 通过查看[Webpack DevTool 文档open in new window][Webpack DevTool _open in new window]可知，SourceMap 的值有很多种情况. ####
> 
> 但实际开发时我们只需要关注两种情况即可：

--------------------

*  开发模式：`cheap-module-source-map`
    
     *  优点：打包编译速度快，只包含行映射
     *  缺点：没有列映射

module.exports = {
      // 其他省略
      mode: "development",
      devtool: "cheap-module-source-map",
    };

*  生产模式：`source-map`
    
     *  优点：包含行/列映射
     *  缺点：打包编译速度更慢

module.exports = {
      // 其他省略
      mode: "production",
      devtool: "source-map",
    };

### 2.提升 webpack 提升打包构建速度 ###

> **使用** **`HotModuleReplacement`****让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。**
> 
> --------------------
> 
> **使用** **`OneOf`** **让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。**
> 
> --------------------
> 
> **使用** **`Include/Exclude`****排除或只检测某些文件，处理的文件更少，速度更快。**
> 
> --------------------
> 
> **使用** **`Cache`** **对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。**
> 
> --------------------
> 
> **使用****`Thead`** **多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）**

--------------------

### 3.减少代码体积 ###

> **使用 `Tree Shaking` 剔除了没有使用的多余代码，让代码体积更小。**
> 
> --------------------
> 
> **使用 `@babel/plugin-transform-runtime` 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。**
> 
> --------------------
> 
> **使用 `Image Minimizer` 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）**

--------------------

### 4.优化代码运行性能 ###

> **使用`Code Split` 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。**
> 
> --------------------
> 
> **使用 `Preload / Prefetch`对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。**
> 
> --------------------
> 
> **使用 `Network Cache` 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。**
> 
> --------------------
> 
> **使用`Core-js` 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。**
> 
> --------------------
> 
> **使用 `PWA`能让代码离线也能访问，从而提升用户体验。**

[ec309889e0d3435fa4eb84800c5149c2.png]: https://img-blog.csdnimg.cn/ec309889e0d3435fa4eb84800c5149c2.png
[Webpack DevTool _open in new window]: https://webpack.docschina.org/configuration/devtool/