Peshko Ответов: 0

Дублированные компоненты в комплекте

У меня есть проект на react / typescript с webpack 2 и различными компонентами, на которые ссылается основной модуль извне с индексными файлами. Вот тестовый проект:

Uploadfiles.io - duplicatedcomponentsinbundle.zip[^]


Сверток находится in:TestReactTs\Scripts\App\portal.bundle.js

Здравствуйте. 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 или что-то в этом роде?
Есть ли плагин, который делает эту работу правильно и как его настроить?
Заранее спасибо. Добрый день!

Что я уже пробовал:

Я добавил плагин dedupe в webpack. config / он делает некоторую оптимизацию, но не решает проблему дублирования моих компонентов (на некоторых сайтах есть информация, что dedupe устарел в webpack 2. действительно ли он устарел или нет?). Попробовал также плагин commonchunks.

0 Ответов