如何防止动态导入复制包？

Question

我正在创建一个 React/Redux 使用 Babel 编译并由 Webpack 捆绑的应用程序。我想实现一个插件功能。所以我使用带有动态导入（）的代码拆分来为每个插件划分主包。但是，如果我在很多地方需要相同的插件，Webpack 将为使用的任何 import() 捆绑一个包并迭代它（0.bundle.js、1.bundle.js、...）。我尝试在 import() 的评论中使用 webpackChunkName: "MyPlugin" 认为如果我导入一个具有相同块名称的 bunble，它将在捆绑时替换另一个，但是因为我使用 babel-plugin-dynamic-import -webpack、webpackChunkName 似乎不再起作用了。由于项目隐私，我无法提供任何可测试的演示。有什么想法吗？

import( /* webpackChunkName: "MyPlugin" */ `./plugins/MyPlugin.jsx` );

.babelrc

{  
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-object-assign",
        "dynamic-import-webpack",
        ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
    ],
    "env": {
        "node": {
            "plugins": [
                ["babel-plugin-transform-require-ignore",
                {"extensions": [".less", ".scss", ".png", ".jpg"]}
            ]
        ]
    },
    "test": {
        "presets": [["env", {"modules": "commonjs"}]]}
    },
    "comments": true
}

webpack.config.js

[...]
module.exports = {
    entry: entry,

    output: {
        path: path.join(__dirname, 'build'),
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].bundle.js',
        publicPath: "/",
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    query: {
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-syntax-dynamic-import",
                            "@babel/plugin-syntax-jsx",
                            "@babel/plugin-transform-object-assign",
                            "dynamic-import-webpack",
                            ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
                        ],
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }
            },
[...]

Answer 1

我用 require.ensure() 替换了动态 import()。

const MyPlugin = require.ensure([], function (require) {
    const plugin = require('./plugins/MyPlugin/MyPlugin.jsx');
    return new plugin.default;
}, "MyPlugin");

如何防止动态导入复制包？

How to prevent dynamic import to duplicate a bundle?

webpack

react-redux

babeljs

code-splitting