Блог

Как я уже говорил, я использую webpack4.0, используя официальный метод отложенной загрузки для разделения кода в моем собственном проекте reactive, чтобы добиться отложенной загрузки, но после того, как я упаковал, я не смог экспортировать полученный файл фрагментов. Что произошло? Пожалуйста, помогите мне, вот мой конфигурационный код.

 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;
};

  

Код конфигурации React

 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>
  

Результат его создания следующий

Реализация отложенной загрузки в React 16.6 очень плавная. Я не пробовал свои силы в loadable, но использую 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