Question

正如我所说，我使用webpack4.0，它使用官方的延迟加载方法在我自己的响应项目中进行代码分区，以实现延迟加载，但是打包后，我无法导出结果块文件。发生了什么？请帮助我，这是我的配置代码。

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const Autoprefixer = require('autoprefixer');
const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');

module.exports = env => {

  const rules = [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(jpg|jpeg|png|gif|svg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
    {
      test: /\.less$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [Autoprefixer()]
          }
        },
        'less-loader'
      ]
    }
  ];

  const plugins = {
    development: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin()
    ],
    production: [
      new CleanWebpackPlugin(['dist']),
      new MiniCssExtractPlugin({
        filename: '[name].min.css'
      }),
      new OptimizeCssAssetsWebpackPlugin(), 
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      }),
      new BundleAnalyzerPlugin()
    ],
    test: [new BundleAnalyzerPlugin()]
  };

  const webpackConfig = {
    entry: {
      index: './src/index.js'
    },
    devtool: 'nosources-source-map',
    output: {
      filename: '[name].[hash].js',
      chunkFilename: '[name].chunk.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [...rules]
    },

    optimization: {
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        maxAsyncRequests: 10,
        cacheGroups: {
          default: false,
          async: {
            name: 'async',
            chunks: 'async',
            minChunks: 1,
            minSize: 1,
            priority: 20
          },
          common: {
            name: 'common',
            chunks: 'initial',
            minChunks: 1,
            minSize: 1,
            priority: 0
          },
          vander: {
            name: 'base',
            test: /node_modules/,
            chunks: 'initial',
            minChunks: 1,
            priority: 10
          }
        }
      }
    },


    plugins: [
      new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify(env.NODE_ENV)
      }),
      ...plugins[env.NODE_ENV]
    ]
  };


  if (env.NODE_ENV === 'development') {
    webpackConfig.devServer = {
      hot: true,
      hotOnly: true
    };
  }
  console.log(webpackConfig);
  return webpackConfig;
};

反应配置代码

import loadable from '@loadable/component';

 <Content>
            <Route
              path="/home/discover"
              component={loadable(() =>
                import('../Discover')
              )}
            />
            <Route
              path="/home/visilize"
              component={loadable(() =>
                import('../Visilize')
              )}
            />
            <Route
              path="/home/dashboard"
              component={loadable(() =>
                import('../Dashboard')
              )}
            />
            <Route
              path="/home/data"
              component={loadable(() => import('../Data'))}
            />
            <Route
              path="/home/alarm"
              component={loadable(() => import('../Alarm'))}
            />
          </Content>

他的制作结果如下 enter image description here

Answer 1

在React 16.6中实现延迟加载非常顺畅。我没有尝试过可加载，但是使用React.lazy()来实现。它易于理解和编写。这是示例语法：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

检查此内容以获取详细信息：

https://scotch.io/bar-talk/whats-new-in-react-166#toc-react-lazy-and-suspense

为什么我在react项目中设置代码拆分，但没有生成异步块文件

反应配置代码

1 个答案: