TechQA.

Aren't too many methods importing babel using core-js?

531 views Asked by At

I decided to use babel-loader for my js files, but when analyzing the source JS I noticed that it weighs too much, so I want to understand whether there are too many implode babel or core-js modules for not my big script.

My script:

import '../../scss/components/mobile-menu-icon.scss';
import '../../scss/blocks/mobile-menu.scss';

let items = [];
let icon;
let menu;
let container;

export default function (_menu, _container) {
    menu = _menu;
    container = _container;

    items = menu.querySelectorAll('.mobile-menu__item');
    icon = menu.querySelector('.mobile-menu__icon');

    function toggleItems() {
        for (const item of items) {
            item.classList.toggle('state--hide');
        }
    }

    toggleItems();

    icon.classList.remove('state--hide');
    icon.addEventListener('click', (evt) => {
        evt.preventDefault();

        icon.classList.toggle('menu-icon_animate_criss-cross');
        icon.classList.toggle('menu-icon--active');
        icon.classList.toggle('mobile-menu__icon_state--open');
        menu.classList.toggle('mobile-menu_state--open');
        container.classList.toggle('state--no-scroll');

        toggleItems();
    });
}

Output file without babel processing:

"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([["js_module_mobilemenu_js"],{

/***/ "./js/module/mobilemenu.js":
/*!*********************************!*\
  !*** ./js/module/mobilemenu.js ***!
  \*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _scss_components_mobile_menu_icon_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../scss/components/mobile-menu-icon.scss */ "./scss/components/mobile-menu-icon.scss");
/* harmony import */ var _scss_blocks_mobile_menu_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../scss/blocks/mobile-menu.scss */ "./scss/blocks/mobile-menu.scss");


let items = [];
let icon;
let menu;
let container;
/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(_menu, _container) {
  menu = _menu;
  container = _container;
  items = menu.querySelectorAll('.mobile-menu__item');
  icon = menu.querySelector('.mobile-menu__icon');

  function toggleItems() {
    for (const item of items) {
      item.classList.toggle('state--hide');
    }
  }

  toggleItems();
  icon.classList.remove('state--hide');
  icon.addEventListener('click', evt => {
    evt.preventDefault();
    icon.classList.toggle('menu-icon_animate_criss-cross');
    icon.classList.toggle('menu-icon--active');
    icon.classList.toggle('mobile-menu__icon_state--open');
    menu.classList.toggle('mobile-menu_state--open');
    container.classList.toggle('state--no-scroll');
    toggleItems();
  });
}

/***/ }),

/***/ "./scss/blocks/mobile-menu.scss":
/*!**************************************!*\
  !*** ./scss/blocks/mobile-menu.scss ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin


/***/ }),

/***/ "./scss/components/mobile-menu-icon.scss":
/*!***********************************************!*\
  !*** ./scss/components/mobile-menu-icon.scss ***!
  \***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin


/***/ })

}]);
//# sourceMappingURL=js_module_mobilemenu_js.js.map?hash=bebac6f18089622b2264

File with babel/core-js processing:

"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([["js_module_mobilemenu_js"],{

/***/ "./js/module/mobilemenu.js":
/*!*********************************!*\
  !*** ./js/module/mobilemenu.js ***!
  \*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.slice.js */ "../node_modules/core-js/modules/es.array.slice.js");
/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../node_modules/core-js/modules/es.object.to-string.js");
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.function.name.js */ "../node_modules/core-js/modules/es.function.name.js");
/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var core_js_modules_es_array_from_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.from.js */ "../node_modules/core-js/modules/es.array.from.js");
/* harmony import */ var core_js_modules_es_array_from_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_from_js__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.string.iterator.js */ "../node_modules/core-js/modules/es.string.iterator.js");
/* harmony import */ var core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_iterator_js__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "../node_modules/core-js/modules/es.regexp.exec.js");
/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "../node_modules/core-js/modules/es.symbol.js");
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var core_js_modules_es_symbol_description_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.symbol.description.js */ "../node_modules/core-js/modules/es.symbol.description.js");
/* harmony import */ var core_js_modules_es_symbol_description_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_description_js__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var core_js_modules_es_symbol_iterator_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.symbol.iterator.js */ "../node_modules/core-js/modules/es.symbol.iterator.js");
/* harmony import */ var core_js_modules_es_symbol_iterator_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_iterator_js__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.array.iterator.js */ "../node_modules/core-js/modules/es.array.iterator.js");
/* harmony import */ var core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_iterator_js__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "../node_modules/core-js/modules/web.dom-collections.iterator.js");
/* harmony import */ var core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_iterator_js__WEBPACK_IMPORTED_MODULE_10__);
/* harmony import */ var _scss_components_mobile_menu_icon_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../scss/components/mobile-menu-icon.scss */ "./scss/components/mobile-menu-icon.scss");
/* harmony import */ var _scss_blocks_mobile_menu_scss__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../scss/blocks/mobile-menu.scss */ "./scss/blocks/mobile-menu.scss");












function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }



var items = [];
var icon;
var menu;
var container;
/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(_menu, _container) {
  menu = _menu;
  container = _container;
  items = menu.querySelectorAll('.mobile-menu__item');
  icon = menu.querySelector('.mobile-menu__icon');

  function toggleItems() {
    var _iterator = _createForOfIteratorHelper(items),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var item = _step.value;
        item.classList.toggle('state--hide');
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
  }

  toggleItems();
  icon.classList.remove('state--hide');
  icon.addEventListener('click', function (evt) {
    evt.preventDefault();
    icon.classList.toggle('menu-icon_animate_criss-cross');
    icon.classList.toggle('menu-icon--active');
    icon.classList.toggle('mobile-menu__icon_state--open');
    menu.classList.toggle('mobile-menu_state--open');
    container.classList.toggle('state--no-scroll');
    toggleItems();
  });
}

/***/ }),

/***/ "./scss/blocks/mobile-menu.scss":
/*!**************************************!*\
  !*** ./scss/blocks/mobile-menu.scss ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin


/***/ }),

/***/ "./scss/components/mobile-menu-icon.scss":
/*!***********************************************!*\
  !*** ./scss/components/mobile-menu-icon.scss ***!
  \***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin


/***/ })

}]);
//# sourceMappingURL=js_module_mobilemenu_js.js.map?hash=72ef68548692dcb1cad1

and to help him, the webpack broke another file with libraries into 1345 lines enter image description here

Isn't there too many dependencies for such a small script, besides the fact that I don't see much need for some polyfill in the syntax ... Can someone explain how this works and whether it is possible to reduce this volume because it seems better do not use it at all if on such a small script he has already increased the file size dozens, and that hundreds of times? :(

Babel config

module.exports = function (api) {
    api.cache(true);

    return {
        'presets': [
            [
                '@babel/preset-env',
                {
                    useBuiltIns: 'usage',
                    corejs : {
                        version : "3",
                        proposals : true
                    },
                    targets: {
                        browsers: [
                            "> 5%",
                            "last 2 versions",
                            "Firefox ESR",
                            "not dead",
                            // "edge >= 16",
                            // "safari >= 9",
                            // "firefox >= 57",
                            // "ie >= 11",
                            // "ios >= 9",
                            // "chrome >= 80"
                        ]
                    }
                }
            ]
        ],
        'plugins': [
            ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
            ['@babel/plugin-proposal-class-properties'],
            ['@babel/plugin-syntax-dynamic-import']
        ]
    }
}
javascript node.js webpack babel-loader core-js
Original Q&A
0

There are 0 answers

Related Questions in JAVASCRIPT

Related Questions in NODE.JS

Related Questions in WEBPACK

Related Questions in BABEL-LOADER

Related Questions in CORE-JS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions