ZerdoX-x
@ZerdoX-x
Frontend developer influenced by web, a11y, crypto

Зачем webpack выносит свой стандартный код в production?

У меня есть сборка на webpack, задумавшись об оптимизации, встал вопрос - зачем мне дэфолтный код в проде?
Можно-ли как-то от этого избавиться, зачем мне этот лишний код, который не используется на сайте?
Хочу поподробнее узнать предназначение этого кода, зачем, почему и как?
Вот пример выходных файлов после production сборки:
(все мои JavaScript исходники пустые)
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()
}([]);


Код прогнал через beautifier, так-то он минифицирован.
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
@deliro
А как ты без "лишнего кода от webpack" сделаешь, например, code splitting? Собственно, для всяких таких вещей этот код и нужен.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы