自用记录文章 持续更新~

高级优化

提升开发体验

1. SourceMap

为什么

为啥要用 代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。

所以需要更加准确的错误提示，来帮助更好的开发代码。

是什么

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

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

怎么用

查看Webpack DevTool 文档 SourceMap 的值有很多种情况

• 开发模式 cheap-module-source-map
  • 优点：打包编译速度快，只包含行映射 如果报错只会告诉你哪一行
  • 缺点：没有列映射

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

• 生产模式 source-map
  • 优点：包含行/列映射 如果报错会告诉你哪一行哪一列
  • 缺点：打包编译速度更慢

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

提升打包构建速度

1. HMR - HotModuleReplacement 热模块替换

为什么

仅仅修改一个模块webpack会从入口文件开始把所有模块重新打包编译 这样速度很慢 所以我们想要做到修改一个模块的代码就只有这个模块重新打包编译，其他模块不变 这样速度会提升

是什么

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面

怎么用

  // 开发服务器: 不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true // 开启hmr(只对修改的部分进行重新打包) 默认true
  },
  
  // 同时最好开启这个配置
  target: "web" // 表示是跑在哪个环境下 可选：node

开启这个配置 只有css样式生效（css经过style-loader处理已经有HMR功能了） js文件修改以后仍然会打包所有

对js文件的处理

// main.js
import ./js/count.js // 这里还是要引入

// 判断是否支持HMR功能
if (module.hot) {
    // 文件发生变化 会执行后面的函数
  module.hot.accept("./js/count.js", function (count) {
    const result1 = count(2, 1);
    console.log(result1);
  });

  module.hot.accept("./js/sum.js", function (sum) {
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });
}

如果有很多js文件 我们是不是要去加很多代码呢 不用这样

vue项目中我们用 vue-loader react项目中我们用react-hot-loader

2. oneOf

为什么

默认打包的时候每个文件都会经过所有loader 就是说每一个文件都过一遍loader 虽然有正则不用处理它 但是都要过一遍 比较慢

是什么

就是每一个文件只能匹配一个loader 匹配上了就不继续匹配了

怎么做

开发和生产都可以这样做

// main.js
moudle: {
    rules: [
        {
            oneOf: [
                {
                    test: /\.css$/,
                    // use 数组里面 Loader 执行顺序是从右到左
                    use: ["style-loader", "css-loader"]
                }，
                ....
            ]
        }
    ]
}

3.Include/Exclude

为什么

开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。

所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。

是什么

include 包含，只处理 xxx 文件

exclude 排除，除了 xxx 文件以外其他文件都处理

4.Cache

为什么

每次打包js文件都要经过eslint检查和babel编译 假设有一万个文件 我们只修改了一个 但是会检查一万个 速度很慢 我们可以缓存未修改过的eslint检查和babel编译

是什么

Cache 对eslint检查和babel编译结果进行缓存

怎么用

生产和开发模式一样

          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含
            use: [babel-loader],
            options: {
              cacheDirectory: true, // 开启babel缓存
              cacheCompression: false, // 关闭缓存文件压缩 压缩的话会耗时间
            }
          },
          
        plugins: [
            new ESLintWebpackPlugin({
              // 指定检查文件的根目录
              context: path.resolve(__dirname, "../src"),
              cache: true, // 开启缓存
              cacheLocation: path.resolve(__dirname,"../node_modules/.cache/eslintcache") // eslint缓存文件所在路径 会生成一个目录
            }),
            .......
            .....
        ]

Thead

为什么

从webpack5打包js文件方面入手 提高打包速度 而webpack5对js的处理主要是eslint、babel、Terer 三个工具

方法: 开启多线程打包！

是什么

多进程打包：开启电脑的多个进程同时干一件事，速度更快。

需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。

怎么做

1. 下载包

npm i thread-loader -D

2. 使用

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

modules:{
    rules: [
        {
            xxxx
        }
    ]
}

    use: [
      {
        loader: "thread-loader", // 开启多进程
        options: {
          workers: threads, // 数量
        },
      },
      {
        loader: "babel-loader",
        options: {
          cacheDirectory: true, // 开启babel编译缓存
        },
      },
    ],

plugins: [
    ESLintWebpackPlugin 下添加
    
    threads
]

devServer同级下

  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },

开发环境下不需要对代码进行压缩 所以TerserPlugin 不需要再添加threads配置

减少代码体积

Tree Shaking

Babel

Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！ Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

下载包

npm i @babel/plugin-transform-runtime -D

配置

开发和生产模式都加

    {
        loader: "babel-loader",
        options: {
          cacheDirectory: true, // 开启babel编译缓存
          cacheCompression: false, // 缓存文件不要压缩
          plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积 
        },
    },

Image Minimizer

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

image-minimizer-webpack-plugin: 用来压缩图片的插件

下载包 npm i image-minimizer-webpack-plugin imagemin -D 还需下载 无损 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D 有损 npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

优化代码运行性能

Code Split

为什么

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。

所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

是什么

代码分割（Code Split）主要做了两件事：

分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。

怎么用

代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分别创建新的文件来演示

1. 多入口

1. 文件目录
```
├── public
├── src
|   ├── app.js
|   └── main.js
├── package.json
└── webpack.config.js
```
2. 安装 `npm i webpack webpack-cli html-webpack-plugin -D`
3. 新建文件
    - app.js
    `console.log(111)`
    - main.js
    `console.log(222)`
    - webpack.config.js
    ```
    // webpack.config.js
    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      // 单入口
      // entry: './src/main.js',
      // 多入口
      entry: {
        main: "./src/main.js",
        app: "./src/app.js",
      },
      output: {
        path: path.resolve(__dirname, "./dist"),
        // [name]是webpack命名规则，使用chunk的name作为输出的文件名。
        // 什么是chunk？打包的资源就是chunk，输出出去叫bundle。
        // chunk的name是啥呢？ 比如： entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx，和文件名无关。
        // 为什么需要这样命名呢？如果还是之前写法main.js，那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
        filename: "js/[name].js",
        clear: true,
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./public/index.html",
        }),
      ],
      mode: "production",
    };
    ```
4. `npx webpack`

总结：配置了几个入口，至少输出几个 js 文件。

2. 提取重复代码

如果多入口文件中都引用了同一份代码，我们不希望这份代码被打包到两个文件中，导致代码重复，体积更大。 我们需要提取多入口的重复代码，只打包生成一个 js 文件，其他文件引用它就好。

去看代码！

3. 按需加载动态导入

想要实现按需加载，动态导入模块。还需要额外配置： 场景: 点击一个按钮 调用sum方法 如果只想要sum方法在点击的时候才调用 咋办咧

场景模拟： public/index.html 中添加一个按钮

// main.js
console.log("hello main");

document.getElementById("btn").onclick = function () {
  // 动态导入 --> 实现按需加载
  // 即使只被引用了一次，也会代码分割
  import("./math.js").then(({ sum }) => {
    alert(sum(1, 2, 3, 4, 5));
  });
};

执行 npx webpack

我们可以发现，一旦通过 import 动态导入语法导入模块，模块就被代码分割，同时也能按需加载 vue中动态导入路由就是这样子

4.单入口

optimization: { splitChunks: { chunk: "all" } }

5. 更新配置

    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },

6. 给动态导入的文件取名字

document.getElementById("btn").onClick = function () {
  // eslint会对动态导入语法报错，需要修改eslint配置文件
  // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
  // "math"将来就会作为[name]的值显示。
  import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

这样执行不会输出math.js

还需要在main.js中配置chunkFilename

由于eslint会对 import语法 报错 所以 需要npm i eslint-plugin-import -D

// .eslintrc.js

plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的

7. 统一配置输出文件名

可以规范图片资源和媒体资源的输出文件名

去掉他们的gennerate 输出

filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）

Preload / Prefetch

#为什么