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

Question

我正在优化我的反应应用程序包。当前大小为 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*"
},

Answer 1

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

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

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