react-demo项目：webpack打包拆分优化(不使用create-react-app脚手架)

最新推荐文章于 2024-04-22 11:40:54 发布

HaanLen

最新推荐文章于 2024-04-22 11:40:54 发布

阅读量472

点赞数

分类专栏： React全家桶系列文章标签： webpack react.js javascript

本文链接：https://blog.csdn.net/weixin_40119412/article/details/128040396

版权

React全家桶系列专栏收录该内容

49 篇文章 13 订阅

订阅专栏

webpack.config.js未优化前

module: {
  rules: [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    }
  }]
}

优化打包执行时间


module: {
  rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/, // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
      include: [path.resolve('src')],// 只在src文件夹下查找
      use: {
        loader: 'babel-loader',
      },
    }]
}

optimizationp配置


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

module.exports = {
  entry: path.resolve(__dirname, './src/main.js'), // 入口文件
  mode: 'development',
  output: {
    filename: '[name]-bundle.js', // 出口文件
    path: path.resolve(__dirname, 'dist'), // 打包输出目录
  },
  devServer: {
    port: 9000, // 指定端口
  },
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
        include: [path.resolve('src')],// 只在src文件夹下查找
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
        }, ],
      },
      {
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ],
      },
      {
        test: /\.node$/,
        loader: 'node-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: './index.html',
    }),
  ],
};

未配置时打包信息如下

PS E:\目录\code\react-node-demo> npm run build

> react-node-demo@1.0.0 build E:\目录\code\react-node-demo
> webpack --config webpack.config.js

asset main-bundle.js 1.37 MiB [emitted] (name: main)
asset ./index.html 342 bytes [emitted]
runtime modules 1.07 KiB 6 modules
modules by path ./node_modules/ 1.27 MiB
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
  modules by path ./node_modules/react/ 85.7 KiB 2 modules
  modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.31 KiB 2 modules
  + 3 modules
modules by path ./src/ 9.12 KiB
  modules by path ./src/pages/ 4.23 KiB 6 modules
  modules by path ./src/*.js 953 bytes 2 modules
  modules by path ./src/*.css 2.55 KiB 2 modules
  ./src/App.jsx 1.41 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 1533 ms

打包优化配置


module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',//这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。
      minSize: 20000,//生成 chunk 的最小体积（以 bytes 为单位）。
      minRemainingSize: 0,//通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块
      minChunks: 1,//拆分前必须共享模块的最小 chunks 数。
      maxAsyncRequests: 30,//按需加载时的最大并行请求数。
      maxInitialRequests: 30,//入口点的最大并行请求数。
      enforceSizeThreshold: 50000,//强制执行拆分的体积阈值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）将被忽略。
      cacheGroups: {//缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组。
        vendors: {
          name: 'vendors',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          priority: 100,
        },
      },
    },
  },  
};

配置后打包信息如下

PS E:\目录\code\react-node-demo> npm run build

> react-node-demo@1.0.0 build E:\目录\code\react-node-demo
> webpack --config webpack.config.js

asset vendors-bundle.js 1.14 MiB [emitted] (name: vendors) (id hint: vendors)
asset main-bundle.js 244 KiB [emitted] (name: main)
asset ./index.html 389 bytes [emitted]
Entrypoint main 1.38 MiB = vendors-bundle.js 1.14 MiB main-bundle.js 244 KiB 
runtime modules 3.47 KiB 8 modules
cacheable modules 1.28 MiB
  modules by path ./node_modules/ 1.27 MiB 18 modules
  modules by path ./src/ 9.12 KiB
    modules by path ./src/pages/ 4.23 KiB 6 modules
    modules by path ./src/*.js 953 bytes 2 modules
    modules by path ./src/*.css 2.55 KiB 2 modules
    ./src/App.jsx 1.41 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 1533 ms

修改打包优化配置,引入antd组件库

  optimization: {
    splitChunks: {
      chunks: 'async',//这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。
      minSize: 20000,//生成 chunk 的最小体积（以 bytes 为单位）。
      minRemainingSize: 0,//通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块
      minChunks: 1,//拆分前必须共享模块的最小 chunks 数。
      maxAsyncRequests: 30,//按需加载时的最大并行请求数。
      maxInitialRequests: 30,//入口点的最大并行请求数。
      enforceSizeThreshold: 50000,//强制执行拆分的体积阈值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）将被忽略。
      cacheGroups: {//缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组。
        vendors: {
          name: 'vendors',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          priority: 100,
        },
        autd: {
          name: 'antd',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](antd)[\\/]/,
          priority: 100,
        },
      },
    },
  },


PS E:\目录\code\react-node-demo> npm run build

> react-node-demo@1.0.0 build E:\目录\code\react-node-demo
> webpack --config webpack.config.js

asset vendors-bundle.js 1.14 MiB [compared for emit] (name: vendors) (id hint: vendors)
asset main-bundle.js 532 KiB [emitted] (name: main)
asset antd-bundle.js 156 KiB [emitted] (name: antd) (id hint: autd)
asset ./index.html 433 bytes [emitted]
Entrypoint main 1.81 MiB = antd-bundle.js 156 KiB vendors-bundle.js 1.14 MiB main-bundle.js 532 KiB
orphan modules 3.15 MiB [orphan] 1037 modules
runtime modules 3.81 KiB 9 modules
cacheable modules 1.52 MiB
  modules by path ./node_modules/ 1.51 MiB 143 modules
  modules by path ./src/ 9.64 KiB
    modules by path ./src/pages/ 4.68 KiB 7 modules
    modules by path ./src/*.js 987 bytes
      ./src/main.js 340 bytes [built] [code generated]
      ./src/router.js 647 bytes [built] [code generated]
    modules by path ./src/*.css 2.55 KiB
      ./src/App.css 1.16 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/App.css 1.38 KiB [built] [code generated]
    ./src/App.jsx 1.45 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 3907 ms
PS E:\目录\code\react-node-demo>