Webpack5优化之提高打包构建速度

最新推荐文章于 2024-08-12 13:28:45 发布
最新推荐文章于 2024-08-12 13:28:45 发布
阅读量2.2k 收藏 5
点赞数
分类专栏： webpack 文章标签： 前端 webpack优化 hmr oneOf 多进程打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010358168/article/details/124907115
版权

文章目录

一、HotModuleReplacement

1.1 为什么

在开发时，我们修改其中一个模块代码，Webpack默认会将所有模块重新打包编译，速度很慢。

我们需要做到修改某个模块代码，就只有这个模块代码重新打包编译，其他模块不变，这样速度就会有很大的提升。

1.2 是什么

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

1.3 怎么用

1.3.1 基本配置

在config/webpack.dev.js文件中配置：

//开发服务器
devServer: {
  host: '127.0.0.1', // 域名
  port: '3000', // 端口
  open: true, // 是否自动打开浏览器
  hot: true,// 开启HMR功能(只能用于开发环境，生产环境不需要)
},

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

1.3.2 JS配置

在main.js中，开启HMR

// 判断是否支持HMR功能
if (module.hot) {
  module.hot.accept('./js/sub.js')
  module.hot.accept('./js/sum.js', function (sum) {
    console.log('module.hot sum called');
  })
}

上面这样写会很麻烦，有多少个js就要配置多少个，所以实际开发我们会使用其他loader来解决。

比如：vue-loader 和 react-hot-loader

二、OneOf

2.1 为什么

打包时每个文件都会经过所有loader处理，虽然test正则原因实际没有处理上，但是都要过一遍，是比较慢的。

2.2 是什么

顾名思义就是只能匹配上一个loader, 剩下的就不匹配了。

2.3 怎么用

修改config/webpack.dev.js和webpack.prod.js，如下：

// 加载器
module: {
  rules: [
    {
      oneOf: [
        {
          // 匹配css结尾文件
          test: /\.css$/,
          // loader执行顺序是从右到左
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.less$/,
          use: ["style-loader", "css-loader", "less-loader"],
        },
        {
          test: /\.s[ac]ss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
        {
          test: /\.styl$/,
          use: ["style-loader", "css-loader", "stylus-loader"],
        },
        {
          test: /\.(png|jpe?g|gif|webp|svg)$/,
          type: "asset",
          parser: {
            // 小于10kb的图片转base64
            // 优点：减少请求数量  缺点：体积会增大三分之一
            dataUrlCondition: {
              maxSize: 20 * 1024 // 20kb
            }
          },
          generator: {
            // 将图片文件输出到 static/imgs 目录中
            // 将图片文件命名 [hash:8][ext][query]
            // [hash:8]: hash值取8位
            // [ext]: 使用之前的文件扩展名
            // [query]: 添加之前的query参数
            filename: "static/imgs/[hash:8][ext][query]",
          }
        },
        {
          /**
           * 处理图标字体、媒体等资源
           * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
             type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
           */
          test: /\.(ttf|woff2?|map4|map3|avi)$/,
          type: "asset/resource",
          generator: {
            filename: "static/media/[hash:8][ext][query]",
          },
        },
        {
          test: /\.js$/,
          exclude: /node_modules/, // 排除node_modules代码不编译
          loader: "babel-loader",
        },
      ]
    }
  ]
},

三、Include/Exclude

3.1 为什么

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

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

3.2 是什么

  • include：包含，只处理xxx文件
  • exclude：排除，除了xxx文件以外其他文件都处理

需要注意的是include和exclude只能二选一

3.3 怎么用

修改config/webpack.dev.js和config/webpack.prod.js，如下：

...
{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  loader: "babel-loader",
},
...
new ESLintWebpackPlugin({
  // 指定检查文件的根目录
  context: path.resolve(__dirname, '../src'),
  exclude: 'node_modules'// 默认值
}),

四、Cache

4.1 为什么

每次打包时js文件都要经过Eslint检查和 Babel编译，速度比较慢。

我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快了。

4.2 是什么

对Eslint检查和Babel编译结果进行缓存。

4.3 怎么用

修改config/webpack.dev.js和config/webpack.prod.js，如下：

...
{
  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') // 缓存目录
}),

五、Thread

5.1 为什么

当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码，这个速度是比较慢的。

我们想要继续提升打包速度，其实就是要提升js的打包速度，因为其他文件都比较少。

而对js文件处理主要就是eslint、babel、Terser三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快了。

5.2 是什么

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

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

5.3 怎么用

我们启动进程的数量就是我们 CPU 的核数。

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

5.3.1 获取CPU核数

修改config/webpack.dev.js和config/webpack.prod.js

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

5.3.2 安装依赖

npm i thread-loader -D

5.3.1 使用

修改config/webpack.prod.js

// nodejs核心模块
const os = require('os')
...
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length
...
{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  use: [
    {
      loader: 'thread-loader',//开启多进程
      options: {
        workers: threads //数量
      }
    },
    {
      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'), // 缓存目录
  threads,//开启多进程
}),
...
// 配置多进程
new TerserPlugin({
  parallel: threads // 开启多进程
})
...

在配置中有css压缩等，借用optimization优化配置

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

我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包可能让我们打包时间变得很长。

六、小结

6.1 效果

经过如上一系列优化，在该示例项目中前后打包耗时对比如下：
在这里插入图片描述
在这里插入图片描述

6.2 完整配置文件

config/webpack.prod.js

// nodejs核心模块
const os = require('os')
const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = 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

// 获取处理样式的Loaders
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/main.js',
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        oneOf: [
          {
            // 匹配css结尾文件
            test: /\.css$/,
            // loader执行顺序是从右到左
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              // 小于10kb的图片转base64
              // 优点：减少请求数量  缺点：体积会增大三分之一
              dataUrlCondition: {
                maxSize: 20 * 1024 // 20kb
              }
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            }
          },
          {
            /**
             * 处理图标字体、媒体等资源
             * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
               type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
             */
            test: /\.(ttf|woff2?|map4|map3|avi)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, '../src'),
            use: [
              {
                loader: 'thread-loader',//开启多进程
                options: {
                  workers: threads //数量
                }
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true,// 开启babel编译缓存
                  cacheCompression: false // 缓存文件不要压缩
                }
              }
            ]
          },
        ]
      }
    ]
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      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'),
      inject: 'head'
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩也可以写到optimization.minimizer里面，效果一样的
    // new CssMinimizerPlugin(),
    // 配置多进程
    // new TerserPlugin({
    //   parallel: threads // 开启多进程
    // })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ]
  },
  //开发服务器
  // devServer: {
  //   host: '127.0.0.1', // 域名
  //   port: '3000', // 端口
  //   open: true, // 是否自动打开浏览器
  //   hot: true // 开启HMR
  // },
  // 模式
  mode: 'production',
  devtool: "source-map",
}
小洋人最happy
关注
专栏目录
【Webpack5笔记】Webpack高级配置---提升打包构建速度（HMR、Oneof、Include/Exclude、Cache和Thead）
qiaoyangla的博客
05-30 719
一、HotModuleReplacement（HMR/热模块替换） 为什么要用到这个（只在开发模式）： 开发时修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以当需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。 HMR：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。 基本配置 module.exports = { // 其他省略 devServer: { ho...
提高webpack的打包速度方法
sdh19981202的博客
10-23 1716
如何提升webpack打包速度 1.跟上开发技术的迭代 Node、Yarn、Npm、Webpack保持最新最稳定的版本 2.在尽可能少的模板上使用loader 合理的使用exclude或者include的配置，来尽量减少loader被频繁执行的频率。当loader执行频率降低时，也会提升webpack的打包速度。比如： module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, '../sr
【前端webpack5高级优化】提升打包构建速度几种优化方案
温的打怪之旅
04-03 1750
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。开发时我们需要使用第三方的库或插件，所有文件都下载到。文件，这样速度就比之前的单进程打包更快了。编译结果，这样第二次打包时速度就会更快了。三个工具，所以我们要提升它们的运行速度。开发时我们修改了其中一个模块代码，的打包速度，因为其他文件都比较少。
Webpack打包构建太慢了?试试这几个提升打包速度方案
最新发布
qq_67572731的博客
08-12 447
【代码】Webpack打包构建太慢了?试试这几个提升打包速度方案。
Webpack5 教程(6) -- 提升打包速度
每天都要努力学习哦~~
01-22 1210
当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。
webpack5如何提升打包构建速度
red_password的博客
11-02 374
项目代码量很多的时候，打包一次需要很久，而项目中最多的往往是js代码，webpack处理js代码，用到的工具有：eslint 、babel、terser。每个文件只要匹配上了 rules里的test正则，就会过一遍loader，这样会影响效率，其实只需要匹配上一个loader以后，就不要往下处理了。注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销，项目小了用线程反而浪费时间。开发中修改了某一个文件，webpack会将所有的文件重新打包编译，速度很慢影响效率。
第十章 webpack5高级优化——提升打包速度
天界程序员的博客
12-15 852
由于随着项目体积的变大，我们的打包速度也随之变慢，为了改善这一现象我需要对做一些优化。开发时我们修改了其中一个模块代码， 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。（/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。文件名： 样式文件：可以使用功能：因为内部实现了~ 文件：默认不能使用功能 ===> 需要修改代码，添加支持功能的代码 上面这样写会很麻烦，所以实际开发我们会使用
提升webpack打包速度的方法
Riona_cheng的博客
09-16 1839
10种提升webpack打包速度的方法
Webpack构建速度优化
gogo2027的博客
10-27 401
当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。
webpack配置优化,让你的构建速度飞起
gogo2027的博客
10-03 786
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~提升打包构建速度减少代码体积优化代码运行性能。
浅谈一个webpack构建速度优化误区
10-16
在本篇关于Webpack构建速度优化的文章中，我们可以了解到一些关键知识点和常见误区，以下详细展开： Webpack构建速度优化误区 开发者在利用Webpack进行项目构建时，常常会遇到一些优化构建速度的误区。比如，在本例...
浅谈React + Webpack 构建打包优化
08-28
本篇文章介绍了 React + Webpack 构建打包优化的方法，包括使用 babel-react-optimize 对 React 代码进行优化检查和使用 Webpack.DLLPlugin 和 HappyPack 来提高构建速度和减少打包后的文件体积。这些方法可以帮助...
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
08-27
本文将主要介绍基于DllPlugin和DllReferencePlugin的webpack构建优化，旨在提高构建速度和项目的整体性能。 什么是DllPlugin和DllReferencePlugin？ DllPlugin和DllReferencePlugin是webpack中的两个插件，用于...
如何优化webpack打包速度
王工头的博客
02-20 1471
欢迎访问我的博客https://qqqww.com/，祝各位码农同胞们早日迎娶白富美，走上人生巅峰~~~ 文章目录前言怎么优化webpack打包速度有些其他方法对webpack的理解对webpack了解哪些webpack的打包原理webpack的构建流程参考文章 前言 今天面试遇到了一个问题，先问的是怎么理解webpack的，我答了webpack的主要作用与主要原理，然后问我怎样优化web...
彻底解决Webpack打包性能问题
weixin_33989058的博客
07-29 501
为什么80%的码农都做不了架构师？>>> ...
Webpack5 常用优化总结
专注前端技术，包括Web端、移动端、小程序、APP
01-05 1659
本文主要总结经常用到的一些等内容的方法。具体的实现可参考webpack官网查看相关示例。注：如果读者还未接触过webpack，请先了解webpack的基本使用。
彻底解决Webpack打包慢的问题
2401_84091938的博客
05-09 266
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
【Webpack5笔记】Webpack高级配置---优化代码运行性能（Code Split、Preload/Prefetch、Network Cache、Core-js和PWA)
qiaoyangla的博客
05-31 473
一、Code Split（代码分割） 多入口 为什么使用： 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。 代码分割（Code Split）主要做了两件事： 分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。 把需要的包下..
webpack深度优化实践：提升构建速度与效率
"深入理解webpack优化，包括构建速度提升和loader优化策略" 在现代前端开发中，webpack作为模块打包工具，其重要性不言而喻。然而，随着项目的日益复杂，优化webpack配置以提高构建效率和应用性能变得越来越关键。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值