【React】自定义搭建react脚手架（生产环境）

---

前言

上篇已搭建开发环境的脚手架

https://blog.csdn.net/tuzi007a/article/details/129630270

本篇搭建生产环境。

生产环境注重代码体积要小，非必要内容不打包进来，用户访问要够快，所以主要有以下功能要实现：

• 非必要的内容不打包
• 需要打包的内容体积尽量小
• 单独打包css并压缩
• 开启缓存，打包更快
• 项目大时，开始多进程打包
• 使用代码分割，实现按需加载
• 使用contenthash，文件内容发生变化，会更改文件名中的hash值，及时更新指定资源。未更新部分可以直接从缓存中获取。
• 使用prefetch插件，实现资源预获取

---

插件介绍

单独处理css

npm i mini-css-extract-plugin -D

压缩css代码

npm i css-minimizer-webpack-plugin -D

压缩

npm i terser-webpack-plugin -D

开启gzip压缩

npm i compression-webpack-plugin -D

第三方预获取插件

npm i @vue/preload-webpack-plugin -D

---

配置

webpack.prod.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const PreloadPlugin = require('@vue/preload-webpack-plugin');

const cssRules = /\.css$/; // 匹配css
const lessRules = /\.less$/; // 匹配less

// 抽取公共部分
const getStyleOptions = (importLoaders, loader) => {
    return [
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                importLoaders
            }
        },
        "postcss-loader",
        loader
    ].filter(Boolean);
}

module.exports = {
    // 生产环境
    mode: "production",
    // 入口
    entry: "./src/index.js",
    // 出口
    output: {
        path: path.resolve(__dirname, "lib"),
        // 使用contenthash 处理缓存问题
        filename: "js/[name].[contenthash:8].js",
        // 多入口时，会生成chunk文件
        chunkFilename: "js/[name].[contenthash:8].chunk.js",
        // 每次打包都清除之前的打包文件
        clean: true
    },
    // 配置loader
    module: {
        rules: [
            {
                // oneOf可以提供精准解析
                oneOf: [
                    {
                        test: cssRules,
                        use: getStyleOptions(1)
                    },
                    {
                        test: lessRules,
                        use: getStyleOptions(2, "less-loader")
                    },
                    {
                        test: /\.jsx?$/,
                        exclude: /node_modules/,
                        use: {
                            loader: "babel-loader",
                            options: {
                                // 开启缓存
                                cacheDirectory: true
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 通过import引入的样式会被单独打包成css文件
        new MiniCssExtractPlugin({
            filename: "css/[name].[contenthash:8].css",
            chunkFilename: "css/[name].[contenthash:8].css"
        }),
        // 进一步压缩
        new CompressionWebpackPlugin({
            exclude: /node_modules/,
        }),
        // 资源预获取
        new PreloadPlugin({
            rel: 'prefetch'
        })
    ],
    optimization: {
        // 开启压缩
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                exclude: /node_modules/,
                parallel: true
            }),
            new TerserPlugin({
                // node_modules不需要重复压缩
                exclude: /node_modules/,
                // 开启多进程压缩
                // 每打开一个进程，会额外耗时600ms左右，
                // 所以在大项目中效果会更好
                parallel: true,
                // 删除注释
                terserOptions: {
                    format: {
                        comments: false
                    }
                },
                extractComments: false
            })
        ],
        // 代码分割
        // 多入口时会使用chunk
        splitChunks: {
            chunks: "all"
        },
        runtimeChunk: {
            name: (entrypoint) => `runtime~${entrypoint.name}`
        }
    },
    resolve: {
        // 扩展文件名，引入时不需要写后缀
        extensions: [".jsx", ".js", ".json"]
    }
}

---

测试

在package.json中增加打包指令

"build": "webpack --config ./webpack.prod.js"

执行指令npm run build可以在/lib中看到打包后的内容

此时来看下主文件大小：

不到1kb的大小，比开发环境中的体积小了无数倍。

---

开源

完整配置代码

https://gitee.com/guozia007/custom_react/tree/master

---