如何发现延迟加载是否有效答案

【问题标题】：How to discover if lazy loading is working or not如何发现延迟加载是否有效
【发布时间】：2022-11-03 07:20:07
【问题描述】：

我正在优化我的反应应用程序包。当前大小为 1.4MB。在路由器中实现延迟加载。在本地主机上运行应用程序时，我可以看到延迟加载在浏览器的网络选项卡中运行良好，我看到第一个初始块加载并在浏览器中呈现，然后剩下的 1.4MB 来了。当我创建一个生产包并将其部署到服务器时，问题就来了，整个 1.4MB 加载，然后可以看到渲染。

在生产捆绑包创建过程中是否缺少某些东西？如何检查延迟加载是否从服务器工作？

Webpack.config.js

const path = require('path');
const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CompressionPlugin = require('compression-webpack-plugin');

process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './src/index.jsx',
    resolve: {
        fallback: { crypto: false },
        extensions: ['.js', '.jsx', '.json', '.wasm'],
        enforceExtension: false,
        alias: {
            process: resolve('node_modules/process')
        }
    },
    devServer: {
        historyApiFallback: true,
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                loader: 'babel-loader',
                exclude: /node_modules[/\\\\](?!(mesh-component-library|mesh-icon-library)[/\\\\]).*/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jp(e*)g|svg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[hash]-[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({ process: 'process/browser' }),
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new MiniCssExtractPlugin({ filename: 'styles.css' }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: process.env.BABEL_ENV,
            BABEL_ENV: process.env.NODE_ENV
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new CompressionPlugin({
            algorithm: "gzip",
            threshold: 10240,
            minRatio: 0.8
          })
    ]
};

包.json

"scripts": {
    "test": "jest --watchAll=false --coverage",
    "testWithResults": "jest --json --outputFile=./testResults.json",
    "start": "webpack-dev-server --mode development --config webpack.config.js --open --port 4000",
    "build": "webpack --mode production --config webpack.config.js",
    "eslint": "eslint src/**/*.js*"
},

【问题讨论】：

您使用什么来构建/捆绑应用程序？您使用的是create-react-app 和默认的react-scripts，它应该自动管理吗？或者你有一个自定义的 webpack？如果您自己管理，您可以分享 webpack 配置吗？请查看 React 文档中链接的 webpack code splitting 指南。
这是自定义的 webpack。
@DrewReese 我已经用 webpack 的详细信息更新了帖子。请看一看。谢谢
Implemented Lazy loading in routers. While running the app at localhost, i can see lazy loading working well in Network tab of browser, I see first initial chunk loads and render's in the browser then rest of the 1.4MB comes.这一切都需要澄清。应该尽量提供一个可重现的例子。例如，您到底是如何进行延迟加载的？

标签： reactjs webpack lazy-loading bundle

【解决方案1】：

尝试配置 webpack SplitChunksPlugin 以包含所有内容。

将此部分添加到您的 webpack 配置中。

optimization: {
  splitChunks: {
    chunks: 'all',
  }
}

【讨论】：