Click here to Skip to main content
13,707,319 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I have a project on react / typescript with webpack 2 and different components refered by the main module from outside with index files. Here is the test project:

Uploadfiles.io - duplicatedcomponentsinbundle.zip[^]


The bundle is located in:TestReactTs\Scripts\App\portal.bundle.js

hello.tsx is my main component the code looks like this:

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



where HomeC2L1 includes HomeL3.

This is the first occurance at number 11 in bundle:


/* 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

/***/ },


And the second occurance of the same component homeL3 at number 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

/***/ }



Is there a way to auto remove this duplucations like webpack plugin or something.
Is there a plugin that does the job right and how to configure it?
Thanks in advance. Good day!

What I have tried:

I've added the dedupe plugin in webpack.config / it does some optimization but it does not solve the duplication of my components (in some sites there is information that dedupe is deprecated in webpack 2. is it realy deprecated or not?). Tried also the commonchunks plugin.
Posted 14-May-17 21:00pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web06-2016 | 2.8.180920.1 | Last Updated 15 May 2017
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100