использование import и динамического import () для загрузки одного и того же модуля

Question

Я использую веб-пакет для связывания моего приложения реагирования, я пытаюсь динамически импортировать внешние библиотеки, чтобы его можно было кэшировать без необходимости загружать его каждый раз, когда изменяется код.

, поэтому я импортирую реакциюв каждом компоненте, подобном этому import React from 'react';
и динамически импортировать его в app.jsx import(/* webpackChunkName: "react" */ 'react');

мой вопрос, приведет ли это к дублированию пакетов реакции?PS: я не хочу менять import React на import('react') в каждом отдельном файле, это можно избежать?

webpack config

module.exports = {
mode: 'production',
cache: false,
entry: {
    index: ['babel-polyfill', './client/src/app.jsx'],
},
optimization: {
    minimizer: [new TerserPlugin({
    parallel: true,
    sourceMap: true,
    terserOptions: {
        mangle: true,
        safari10: true,
        compress: {},
        warnings: false,
        ecma: 6,
        output: {
        comments: false,
        },
    },
    })],
},
devtool: 'source-map',
output: {
    path: `${rootPath}/server-dist/public/`,
    filename: '[name].[contenthash].bundle.js',
    chunkFilename: '[name].[contenthash].bundle.js',
    publicPath: '/',
},
module: {
    rules: [
    // compile js
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
        loader: 'babel-loader',
        options: {
            presets: ['react', 'es2015', 'stage-2'],
            plugins: ['react-hot-loader/babel', ['module-resolver', {
            alias: {
                common: './common',
            },
            }]],
            babelrc: false,
        },
        },
    },
    // compile sass
    {
        test: /\.scss$/,
        use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 'resolve-url-loader', 'postcss-loader?sourceMap', 'sass-loader?sourceMap',
        ],

    },
    // load images
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
        'file-loader?hash=sha512&digest=hex&name=assets/img/[name].[ext]',
        {
            loader: 'image-webpack-loader',
            query: {
            mozjpeg: {
                progressive: true,
            },
            gifsicle: {
                interlaced: true,
            },
            optipng: {
                optimizationLevel: 7,
            },
            },
        },
        ],
    },
    // load fonts
    {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: 'file-loader?name=assets/fonts/[name].[ext]',

    },
    {
        test: require.resolve('blueimp-file-upload'),
        loader: 'imports-loader?define=>false',
    },
    {
        test: require.resolve('medium-editor-insert-plugin'),
        loader: 'imports-loader?define=>false',
    },
    ],
},
resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
    'jquery-ui/widget$': 'jquery-ui/ui/widget',
    },
},
plugins: [
    new HtmlWebpackPlugin({
    inject: true,
    template: `${rootPath}/client/index.html`,
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery',
    }),
    new webpack.EnvironmentPlugin(['TEST']),
    extractSass,
],
node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
},
};