捆绑中的重复组件

Question

我有一个关于 react / typescript 的项目，其中包含 webpack 2 以及主模块从外部引用的不同组件以及索引文件。这是测试项目：

My test project

bundle 位于：TestReactTs\Scripts\App\portal.bundle.js

hello.tsx 是我的主要组件，代码如下所示：

import * as React from "react";
import { HomeC2L1 } from "./components2"
import { HomeL3 } from "./components1/components1_level2/components1_level3/homel3"




export interface HelloProps { compiler: string; framework: string; }

export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return (
            <div>
                <h1>Hello from React {this.props.compiler} {this.props.framework}</h1>
                <HomeC2L1 />

                <HomeL3/>
            </div>
        );
    }
}

其中 HomeC2L1 包括 HomeL3。

这是捆绑包中第 11 位的第一次出现：

/* 11 */
/*!*************************************************************************************!*\
  !*** ./dist/components/components1/components1_level2/components1_level3/homeL3.js ***!
  \*************************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
    var React = __webpack_require__(/*! react */ 1);
    var HomeL3 = (function (_super) {
        __extends(HomeL3, _super);
        function HomeL3() {
            _super.apply(this, arguments);
        }
        HomeL3.prototype.render = function () {
            return (React.createElement("div", null, 
                React.createElement("h2", null, "this is home Level3")
            ));
        };
        return HomeL3;
    }(React.Component));
    exports.HomeL3 = HomeL3;
    //# sourceMappingURL=homeL3.js.map

/***/ },

同样的组件 homeL3 第二次出现在第 16 位：

/* 16 */
/*!*************************************************************************************!*\
  !*** ./dist/components/components1/components1_level2/components1_level3/homel3.js ***!
  \*************************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
    var React = __webpack_require__(/*! react */ 1);
    var HomeL3 = (function (_super) {
        __extends(HomeL3, _super);
        function HomeL3() {
            _super.apply(this, arguments);
        }
        HomeL3.prototype.render = function () {
            return (React.createElement("div", null, 
                React.createElement("h2", null, "this is home Level3")
            ));
        };
        return HomeL3;
    }(React.Component));
    exports.HomeL3 = HomeL3;
    //# sourceMappingURL=homeL3.js.map

/***/ }

有没有办法像 webpack 插件或其他东西一样自动删除这些重复项。我已经在 webpack.config 中添加了 dedupe 插件 / 它做了一些优化，但它没有解决我的组件的重复问题（在某些站点中，有信息表明 dedupe 在 webpack 2 中已弃用。它真的被弃用了吗？）。也尝试了 commonchunks 插件。

提前致谢。美好的一天！

Answer 1

通过使用大写字母和非大写字母固定导入来解决。现在bundle中没有重复了。