Rollup
Следующее поколение упаковочных инструментов, это позиционирование Rollup для себя. В современной области фронтенда нет недостатка в инструментах сборки, и каждый фронтенд-инженер использовал или слышал о веб-пакете. Видно, что инструменты сборки таких фреймворков, как React и Vue, используют свертки. В таком случае, почему эти фреймворки выбирают накопительный пакет? Каковы его характеристики? Столкнувшись с различными сценариями, как мы выбираем инструмент сборки? Эта статья покажет вам один за другим.
Tree Shaking
Встряхивание дерева предлагается с помощью свертки, что также является очень важной функцией свертки.Что такое встряхивание дерева?Объяснение свертки заключается в том, что при построении кода при использовании модульного кода ES6 он будет выполнять статический анализ вашего кода, только упаковывать используемый код. Преимущество этого заключается в уменьшении размера кода.
Вы можете видеть, что его реализация основана на статическом анализе, почему должны использоваться модули ES6? Давайте рассмотрим несколько особенностей модулей ES6:
-
importИмя модуля может быть только строковой константой. - привязка импорта является неизменной, аналогично
const - Появляется только как оператор на верхнем уровне модуля, а не в
functionвнутри илиifВнутри области блочного уровня - импорт поднял, независимо
importГде появляется оператор, когда модуль инициализируется, всеimportдолжны быть импортированы.
Вышеуказанные функции делают модули ES6 менее гибкими, но делают все зависимости детерминированными и позволяют выполнять статический анализ кода. Нет необходимости полагаться на среду выполнения для определения зависимостей. Возьмите каштан: maths.js
// maths.js
export function square ( x ) {
return x * x;
}
export function cube ( x ) {
return x * x * x;
}
main.js
import { cube } from './maths.js';
console.log( cube( 5 ) );
После выполнения следующей команды
$ rollup main.js --o bundle.js --f iife
выходной пакет.js
(function () {
'use strict';
// maths.js
function cube(x) {
return x * x * x;
}
console.log(cube(5));
}());
Как видите, в maths.jssquareМетод не используется и не упаковывается в результат сборки. При построении добавить параметрf, значениеiifeвариант, организация кода после сборки оборачивается функцией немедленного выполнения.
Формат вывода после сборки кода
Вышеуказанные параметры указываются во время сборкиf, значениеiifeвозможность вывода кода сборки в стиле немедленного выполнения, накопительный пакет также поддерживает следующие форматы вывода:
- amd - AMD
- cjs -CommonJS
- es - ES6 modules
- umd - UMD
- system - SystemJS loader
При построении кода вы можете выбирать различные форматы вывода в соответствии со средой выполнения кода.Если ваш код выполняется в узле, тоcjsДа, если ваш код работает в среде браузера, тоiifeПросто отлично, если оба, то выбирайтеumd.
существуетСкомпилируйте и соберите веб-пакетНа самом деле в выходных данных сборки веб-пакета упоминается три типа кода.
- ваш код бизнес-логики
- Время выполнения — начальная загрузка выполнения кода
- Манифест — документация зависимостей модулей
Если мы выполним следующую команду на main.js после сборки
webpack main.js dist.js
вывод dist.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__maths_js__ = __webpack_require__(1);
console.log(Object(__WEBPACK_IMPORTED_MODULE_0__maths_js__["a" /* cube */])(5));
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__["a"] = cube;
// maths.js
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
/***/ })
/******/ ]);
- Вы можете увидеть код бизнес-логики, время выполнения и манифест в результате сборки.
- Документируйте зависимости в манифесте через
__webpack_require__нагрузка - Результат сборки содержит неиспользуемые
square - Объем сборки значительно больше, чем в роллапе
iifeбольшой формат - Когда код выполняется, в сводке
iifeФормат вывода, скорость выполнения кода быстрее, webpack тоже строит поиск зависимостей, а каждый модуль обёрнут в функцию, при выполнении формирует замыкания одно за другим, занимая память, конечно, можно использовать в webpack3 useConcatenationPluginПлагины оптимизируют выходные форматы, подобные этому, упакованные в зависимость
Для производительностиthe-cost-of-small-modulesСделал хороший обзор, чтобы узнать.
нет серебряной пули
Когда появился webpack, было реализовано разделение кода, чтобы упростить создание статических файлов, таких как css и изображения, и разрешить загрузку кода по запросу. быть упакованным. Этот накопительный пакет кажется менее применимым. Итак, мы видим, что при сборке некоторых библиотек можно выбрать rollup, а при сборке некоторых приложений — webpack.
Технологический еженедельник IVWEBШок в сети, обратите внимание на публичный номер: сообщество IVWEB, регулярно каждую неделю публикуйте качественные статьи.