提升打包构建速度

HotModuleReplacement

为什么

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

所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能快很多

是什么

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

怎么用

基本配置

module.exports = {
  devServer: {
    host: 'localhost',
    port: '8080',
    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进行检测（匹配成功后也不会停止），影响效率

是什么

Oneof就是只匹配一个loader，剩下的不匹配了

怎么用

const path = require('path') // 处理路径
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //将css提取成单独的文件，而非混写在js中
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css代码

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/index.js',
    clean: true
  },
  module: {
    rules: [
      {
        oneOf: [{
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },{test: /\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
          ]},{test: /\.s[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]},{test: /\.styl$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'stylus-loader'
          ]},{
            // 处理图片资源
            test: /\.(png|svg|webp|jpe?g|gif)$/,
            type: 'asset',
            parse: {
              dataUrlCondition: {
                maxSize: 10 * 1024
              }
            },
            generator: {
              filename: 'static/images/[hash:10][ext][query]'
            }
          },{
            // 处理其他资源
            test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            // babel
            test: /\.js$/,
            exclude: 'node_module',
            use: {
              loader: 'babel-loader'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, '../src')
    }),
    new HTMLWebpackPlugin({
      title: 'K Platform'
      template: path.resolve(__diename, '../public/index.html')
    }),
    new MiniCssExtractPlugin(),
    new CSSMinimizerWebpackPlugin()
  ],
  devServer: {
    host: 'localhost',
    port: '8080',
    open: true,
    hot: true
  }
  mode: 'development',
  devtool: 'cheap-module-source-map'
}

Include/Exclude

为什么

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

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

是什么

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

怎么用

const path = require('path') // 处理路径
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //将css提取成单独的文件，而非混写在js中
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css代码

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/index.js',
    clean: true
  },
  module: {
    rules: [
      {
        oneOf: [{
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },{test: /\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
          ]},{test: /\.s[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]},{test: /\.styl$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'stylus-loader'
          ]},{
            // 处理图片资源
            test: /\.(png|svg|webp|jpe?g|gif)$/,
            type: 'asset',
            parse: {
              dataUrlCondition: {
                maxSize: 10 * 1024
              }
            },
            generator: {
              filename: 'static/images/[hash:10][ext][query]'
            }
          },{
            // 处理其他资源
            test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            // babel
            test: /\.js$/,
            include: path.resolve(__dirname, '../src')
            use: {
              loader: 'babel-loader'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, '../src')
    }),
    new HTMLWebpackPlugin({
      title: 'K Platform'
      template: path.resolve(__diename, '../public/index.html')
    }),
    new MiniCssExtractPlugin(),
    new CSSMinimizerWebpackPlugin()
  ],
  devServer: {
    host: 'localhost',
    port: '8080',
    open: true,
    hot: true
  }
  mode: 'development',
  devtool: 'cheap-module-source-map'
}

Cache

为什么

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

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

是什么

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

怎么用

const path = require('path') // 处理路径
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //将css提取成单独的文件，而非混写在js中
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css代码

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/index.js',
    clean: true
  },
  module: {
    rules: [
      {
        oneOf: [{
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },{test: /\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
          ]},{test: /\.s[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]},{test: /\.styl$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'stylus-loader'
          ]},{
            // 处理图片资源
            test: /\.(png|svg|webp|jpe?g|gif)$/,
            type: 'asset',
            parse: {
              dataUrlCondition: {
                maxSize: 10 * 1024
              }
            },
            generator: {
              filename: 'static/images/[hash:10][ext][query]'
            }
          },{
            // 处理其他资源
            test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            // babel
            test: /\.js$/,
            include: path.resolve(__dirname, '../src')
            use: {
              loader: '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"
      ),
    }),
    new HTMLWebpackPlugin({
      title: 'K Platform'
      template: path.resolve(__diename, '../public/index.html')
    }),
    new MiniCssExtractPlugin(),
    new CSSMinimizerWebpackPlugin()
  ],
  devServer: {
    host: 'localhost',
    port: '8080',
    open: true,
    hot: true
  }
  mode: 'development',
  devtool: 'cheap-module-source-map'
}

Thead

为什么

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

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

而对js文件处理主要就是babel、eslint、Terser(生产模式下自动压缩)三个工具，所以我们要提高他们的运行速度

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

是什么

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

尽在特别耗时的操作中使用，因为每个进程启动就有大约600ms左右的开销

怎么用

获取cpu的核心数

const os = require('os')
const threads = os.cpus().length

下载包

  npm i thead-loader -D

应用

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const os = require('os')

// cpu数量
const cpuCount = os.cpus().length

const getStyleLoader = (loader) => {
  return [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader'.
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    },
    loader,
  ].filter(Boolean)
}

module.exports = {
  entry: './src/main.js',
  output: {
    path: undefined,
    filename: 'static/js/main.js',
  },
  module: {
    rules: [{
      oneOf: [{
        test: /\.css$/,
        use: getStyleLoader()
      },{
        test: /\.less$/,
        use: getStyleLoader('less-loader')
      },{
        test: /\.s[ac]ss$/,
        use: getStyleLoader('sass-loader')
      },{
        test: /\.styl$/,
        use: getStyleLoader('stylus-loader')
      },{
        test: /\.(png|svg|webp|jpe?g|)$/,
        type: 'asset',
        parse: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        },
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },{
        test: /\.(ttf|woff2?|avi|mp3|mp4)$/,
        use: 'asset/resource',
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },{
        test: /\.js$/,
        exclude: 'node_modules'
        use: [
        {
          loader: 'thead-loader',
          options: {
            workers: cpuCount
          }
        },
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false, // babel压缩缓存
            presets: ['@babel/preset-env']
          }
        }]
      }]
    }]
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, '../src'),
      cache: true,
      cachelocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache')
      theads: cpuCount
    }),
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, '../public/')
    }),
    new MiniCssExtractPlugin({
      filename: 'static/css/index.css'
    })
  ],
  optimization: {
    minimizer: [
      new CSSMinimizerWebpackPlugin(),
      new TerserWebpackPlugin({
        parallel: cpuCount
      })
    ]
  }
  mode: 'production',
  devtool: 'source-map'
}

基础

高级

提升打包构建速度

HotModuleReplacement

为什么

是什么

怎么用

OneOf

为什么

是什么

怎么用

Include/Exclude

为什么

是什么

怎么用

Cache

为什么

是什么

怎么用

Thead

为什么

是什么

怎么用

提升打包构建速度 ​

HotModuleReplacement ​

为什么 ​

是什么 ​

怎么用 ​

OneOf ​

为什么 ​

是什么 ​

怎么用 ​

Include/Exclude ​

为什么 ​

是什么 ​

怎么用 ​

Cache ​

为什么 ​

是什么 ​

怎么用 ​

Thead ​

为什么 ​

是什么 ​

怎么用 ​

提升打包构建速度

HotModuleReplacement

为什么

是什么

怎么用

OneOf

为什么

是什么

怎么用

Include/Exclude

为什么

是什么

怎么用

Cache

为什么

是什么

怎么用

Thead

为什么

是什么

怎么用