注册
登录

Webpack5 教程提升打包构建速度

编译工具 / 发布于 3个月前 / 更新于 / 本文字数: 2w 字 /教程集数： 16

标签： webpack5 教程 / Webpack5 提升打包速度 / webpack5 优化打包 / webpack5 oneOf / webpack5 Cache

优化原因

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，提高打包速度。

HotModuleReplacement

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

配置 

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。

配置JS热更新 

// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);

// 判断是否支持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);
  });
}

上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。
比如：vue-loader, react-hot-loader

OneOf

打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。
加载器默认时匹配规则，上到下匹配，如果匹配到就执行，如果没有匹配到则执行下一个条件，存在效率问题。
格式如下：

 //加载器
    module: {
        rules: [
            {
                oneOf:[
                    //填写规则
                ]
            }
        ]

例如：

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        path: undefined, // 开发模式没有输出，不需要指定输出目录
        //入口文件输出文件名
        filename: "static/js/index.js",
    },
    //加载器
    module: {
        rules: [
            //loader配置
            {
                oneOf:[
                    {
                        test: /\.css$/i,
                        use: [
                            "style-loader", //将JS中的css通过创建style标签添加到html文件中生效
                            "css-loader", //将css自由编译成commonjs的模块到js中
                        ],
                    },
                    {
                        test: /\.less$/i,
                        //loader:'xx' 只能使用1个loader
                        use: [
                            // compiles Less to CSS
                            'style-loader',
                            'css-loader',
                            'less-loader',
                        ],
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: [
                            // 将 JS 字符串生成为 style 节点
                            'style-loader',
                            // 将 CSS 转化成 CommonJS 模块
                            'css-loader',
                            // 将 Sass 编译成 CSS
                            'sass-loader',
                        ],
                    },
                    {
                        test: /\.styl$/,
                        loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
                    },
                    {
                        test: /\.(png|jp?g|gif|webp|svg)$/,
                        type: "asset",
                        parser: {
                            dataUrlCondition: {
                                //小于10kb的图片转base64
                                //有点，减少请求数量，缺点，体积会变大
                                maxSize: 10 * 1024
                            }
                        },
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/img/[hash:10][ext][query]'
                        }
                    },
                    //图标设置
                    {
                        test: /\.(ttf|woff2?)$/,
                        type: "asset/resource",
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/font/[hash:10][ext][query]'
                        }
                    },
                    //视频文件
                    {
                        test: /\.(mp3|avi|mp4)$/,
                        type: "asset/resource",
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/video/[hash:10][ext][query]'
                        }
                    },
                    //处理转换es6
                    {
                        test: /\.js$/,
                        exclude: /node_modules/, // 排除node_modules代码不编译
                        loader: "babel-loader",
                    },
                ]
            }
        ]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
    ],
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    //模式
    mode: "development",
    devtool: "cheap-module-source-map",
}

Include/Exclude

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

include

包含，只处理 xxx 文件

exclude

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

配置优化 

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        path: undefined, // 开发模式没有输出，不需要指定输出目录
        //入口文件输出文件名
        filename: "static/js/index.js",
    },
    //加载器
    module: {
        rules: [
            //loader配置
            {
                oneOf: [{
                        test: /\.css$/i,
                        use: [
                            "style-loader", //将JS中的css通过创建style标签添加到html文件中生效
                            "css-loader", //将css自由编译成commonjs的模块到js中
                        ],
                    },
                    {
                        test: /\.less$/i,
                        //loader:'xx' 只能使用1个loader
                        use: [
                            // compiles Less to CSS
                            'style-loader',
                            'css-loader',
                            'less-loader',
                        ],
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: [
                            // 将 JS 字符串生成为 style 节点
                            'style-loader',
                            // 将 CSS 转化成 CommonJS 模块
                            'css-loader',
                            // 将 Sass 编译成 CSS
                            'sass-loader',
                        ],
                    },
                    {
                        test: /\.styl$/,
                        loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
                    },
                    {
                        test: /\.(png|jp?g|gif|webp|svg)$/,
                        type: "asset",
                        parser: {
                            dataUrlCondition: {
                                //小于10kb的图片转base64
                                //有点，减少请求数量，缺点，体积会变大
                                maxSize: 10 * 1024
                            }
                        },
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/img/[hash:10][ext][query]'
                        }
                    },
                    //图标设置
                    {
                        test: /\.(ttf|woff2?)$/,
                        type: "asset/resource",
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/font/[hash:10][ext][query]'
                        }
                    },
                    //视频文件
                    {
                        test: /\.(mp3|avi|mp4)$/,
                        type: "asset/resource",
                        generator: {
                            //hash:10 表示取hash前10位
                            filename: 'static/video/[hash:10][ext][query]'
                        }
                    },
                    //处理转换es6
                    {
                        test: /\.js$/,
                        include: path.resolve(__dirname, "../src"), // 包含
                        loader: "babel-loader",
                    },
                ]
            }
        ]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 排除目录默认值
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
    ],
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    //模式
    mode: "development",
    devtool: "cheap-module-source-map",
}

Cache

每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。
我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。

修改加载器 

{
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            },
          },

修改插件 

 new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),

整个 

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const getStyleLoaders = (preProcessor) => {
    return [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
};

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        //输出路径
        //__dirname nodejs的变量，代表当前文件所在的文件夹目录
        path: path.resolve(__dirname, "../dist"), //绝对路径
        //入口文件输出文件名
        filename: "static/js/index.js",
        clean: true, //自动清空上次打包的内容，原理，将path目录清空，再进行打包
    },
    //加载器
    module: {
        rules: [{
            oneOf: [
                //loader配置
                {
                    test: /\.css$/i,
                    use: getStyleLoaders(),
                },
                {
                    test: /\.less$/i,
                    //loader:'xx' 只能使用1个loader
                    use: getStyleLoaders('less-loader'),
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: getStyleLoaders('sass-loader'),
                },
                {
                    test: /\.styl$/,
                    loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
                },
                {
                    test: /\.(png|jp?g|gif|webp|svg)$/,
                    type: "asset",
                    parser: {
                        dataUrlCondition: {
                            //小于10kb的图片转base64
                            //有点，减少请求数量，缺点，体积会变大
                            maxSize: 10 * 1024
                        }
                    },
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/img/[hash:10][ext][query]'
                    }
                },
                //图标设置
                {
                    test: /\.(ttf|woff2?)$/,
                    type: "asset/resource",
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/font/[hash:10][ext][query]'
                    }
                },
                //视频文件
                {
                    test: /\.(mp3|avi|mp4)$/,
                    type: "asset/resource",
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/video/[hash:10][ext][query]'
                    }
                },
                //处理转换es6
                {
                    test: /\.js$/,
                    include: path.resolve(__dirname, "../src"), // 也可以用包含
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true, // 开启babel编译缓存
                        cacheCompression: false, // 缓存文件不要压缩
                      },
                },
            ]
        }]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默认值
            cache: true, // 开启缓存
            // 缓存目录
            cacheLocation: path.resolve(
              __dirname,
              "../node_modules/.cache/.eslintcache"
            ),
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        // css压缩
        new CssMinimizerPlugin(),
    ],

    //模式
    mode: "production",
    devtool: "source-map",
}

Thead 多进程

当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。
我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。
而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。
我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了

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

如何获取 CPU 的核数，因为每个电脑都不一样 

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

依赖包 

npm i thread-loader -D

配置 

const os = require("os");

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length;

const getStyleLoaders = (preProcessor) => {
    return [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
};

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        //输出路径
        //__dirname nodejs的变量，代表当前文件所在的文件夹目录
        path: path.resolve(__dirname, "../dist"), //绝对路径
        //入口文件输出文件名
        filename: "static/js/index.js",
        clean: true, //自动清空上次打包的内容，原理，将path目录清空，再进行打包
    },
    //加载器
    module: {
        rules: [{
            oneOf: [
                //loader配置
                {
                    test: /\.css$/i,
                    use: getStyleLoaders(),
                },
                {
                    test: /\.less$/i,
                    //loader:'xx' 只能使用1个loader
                    use: getStyleLoaders('less-loader'),
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: getStyleLoaders('sass-loader'),
                },
                {
                    test: /\.styl$/,
                    loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
                },
                {
                    test: /\.(png|jp?g|gif|webp|svg)$/,
                    type: "asset",
                    parser: {
                        dataUrlCondition: {
                            //小于10kb的图片转base64
                            //有点，减少请求数量，缺点，体积会变大
                            maxSize: 10 * 1024
                        }
                    },
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/img/[hash:10][ext][query]'
                    }
                },
                //图标设置
                {
                    test: /\.(ttf|woff2?)$/,
                    type: "asset/resource",
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/font/[hash:10][ext][query]'
                    }
                },
                //视频文件
                {
                    test: /\.(mp3|avi|mp4)$/,
                    type: "asset/resource",
                    generator: {
                        //hash:10 表示取hash前10位
                        filename: 'static/video/[hash:10][ext][query]'
                    }
                },
                //处理转换es6
                {
                    test: /\.js$/,
                    include: path.resolve(__dirname, "../src"), // 也可以用包含
                    use: [{
                            loader: "thread-loader", // 开启多进程
                            options: {
                                workers: threads, // 数量
                            },
                        },
                        {
                            loader: "babel-loader",
                            options: {
                                cacheDirectory: true, // 开启babel编译缓存
                                cacheCompression: false, // 缓存文件不要压缩
                            },
                        }
                    ],

                },
            ]
        }]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默认值
            cache: true, // 开启缓存
            // 缓存目录
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
            threads, // 开启多进程

        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),

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

    //模式
    mode: "production",
    devtool: "source-map",
}

我们目前打包的内容都很少，启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

Webpack5 教程

哪吒

哪吒 · 中级学士

热爱技术，喜欢新东西。

老程序员年度分享MVP
查看更多

最新视频教程

查看更多

最新视频课程

热门文章

热门文档

Laravel 消息通知使用

ace.js 打造一款属于你的 Web 编辑器，入门文档。

Laravel 实现 RBAC 权限管理功能 Permission 包操作

微信小程序等比例图片压缩上传，100%可用，非官方压缩方法

宝塔面板强制绑定账号修改为不强制绑定方案

wap2App 入门讲解，100%速成，全面为你讲解。

Laravel 设置请求头 header 参数

Laravel 的 PhpSpreadsheet 包入门

Laravel 表格操作 Maatwebsite/Laravel-Excel 3.1 最新版本的操作指南

Linux 下如何监听我们的脚本是否掉线了

查看更多

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

postman 使用手册cookie 使用

谷歌浏览器插件教程proxy 代理

易语言入门判断文件夹是否存在的方法

易语言入门TAB 标签页制作

Visual Studio Code 入门和使用教程插件安装使用

Visual Studio Code 入门和使用教程安装下载

查看更多

订阅会员

类型:
金额:
立即购买

购买学币

学币:
金额:
立即购买

选择支付类型

支付宝电脑支付
微信支付扫码
支付宝扫码支付
立即支付