Z
Z
ZerdoX-x2019-12-06 17:28:14
JavaScript
ZerdoX-x, 2019-12-06 17:28:14

Why is webpack pushing its standard code into production?

I have a build on webpack, thinking about optimization, the question arose - why do I need the default code in the prod?
Is it possible to somehow get rid of this, why do I need this extra code that is not used on the site?
I want to know in more detail the purpose of this code, why, why and how?
Here is an example of output files after production build:
(all my JavaScript sources are empty)

main.[hash].bundle.js

(window.webpackJsonp = window.webpackJsonp || []).push([
    [0], {
        tjUo: function(o, n, r) {
            "use strict";
            var e;
            r.r(n), (e = r("zjoS")).keys().forEach(e)
        },
        zjoS: function(o, n) {
            function r(o) {
                var n = new Error("Cannot find module '" + o + "'");
                throw n.code = "MODULE_NOT_FOUND", n
            }
            r.keys = function() {
                return []
            }, r.resolve = r, o.exports = r, r.id = "zjoS"
        }
    },
    [
        ["tjUo", 1]
    ]
]);


runtime.[hash].bundle.js

! function(e) {
    function r(r) {
        for (var n, l, f = r[0], i = r[1], a = r[2], c = 0, s = []; c < f.length; c++) l = f[c], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0;
        for (n in i) Object.prototype.hasOwnProperty.call(i, n) && (e[n] = i[n]);
        for (p && p(r); s.length;) s.shift()();
        return u.push.apply(u, a || []), t()
    }

    function t() {
        for (var e, r = 0; r < u.length; r++) {
            for (var t = u[r], n = !0, f = 1; f < t.length; f++) {
                var i = t[f];
                0 !== o[i] && (n = !1)
            }
            n && (u.splice(r--, 1), e = l(l.s = t[0]))
        }
        return e
    }
    var n = {},
        o = {
            1: 0
        },
        u = [];

    function l(r) {
        if (n[r]) return n[r].exports;
        var t = n[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(t.exports, t, t.exports, l), t.l = !0, t.exports
    }
    l.m = e, l.c = n, l.d = function(e, r, t) {
        l.o(e, r) || Object.defineProperty(e, r, {
            enumerable: !0,
            get: t
        })
    }, l.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, l.t = function(e, r) {
        if (1 & r && (e = l(e)), 8 & r) return e;
        if (4 & r && "object" == typeof e && e && e.__esModule) return e;
        var t = Object.create(null);
        if (l.r(t), Object.defineProperty(t, "default", {
                enumerable: !0,
                value: e
            }), 2 & r && "string" != typeof e)
            for (var n in e) l.d(t, n, function(r) {
                return e[r]
            }.bind(null, n));
        return t
    }, l.n = function(e) {
        var r = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return l.d(r, "a", r), r
    }, l.o = function(e, r) {
        return Object.prototype.hasOwnProperty.call(e, r)
    }, l.p = "";
    var f = window.webpackJsonp = window.webpackJsonp || [],
        i = f.push.bind(f);
    f.push = r, f = f.slice();
    for (var a = 0; a < f.length; a++) r(f[a]);
    var p = i;
    t()
}([]);


I ran the code through the beautifier, so it is minified.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Kitaev, 2019-12-06
@ZerdoX-x

And how can you do, for example, code splitting without "extra code from webpack"? Actually, for all sorts of such things, this code is needed.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question