Bundle js: Зачем и где все это нужно bundle.js?

Hemadri Dasari    

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

Как сделать более читабельным bundle.js с webpack (sourcemap)?

Я пытаюсь сделать свой первый проект webpack и не могу найти способ изменить цифровые клавиши, которые представляют модули в моем выводе bundle.js, на описательную строку, чтобы было легче trace его…

bundle.js отсутствует в сборке webpack при использовании webpack-dev-server

Я посмотрел на подобное, но не смог найти концертного ответа, который решил бы мою проблему. Я не могу найти файл bundle.js, хотя указываю, где он должен быть выведен, и все работает в браузере. Я…

React, Webpack: bundle.js не генерируется

Edit: причина заключалась в том , что я запускал webpack-dev-server , когда запускал только webpack , это работало. Я использую React и Webpack. bundle.js не генерируется. Я нашел этот вопрос на SO…

Не могу найти bundle.js

Я знаю, что этот вопрос уже задавался раньше, но, честно говоря, нигде не могу найти ответа-Похоже, что я делаю все, что должен, однако bundle не создается. Итак, у меня есть этот файл…

WEBPACK DEV сервер не работает, хотя webpack правильно генерирует bundle.js

Я попытался запустить webpack-dev-server в задаче Gulp, но даже если webpack генерирует bundle.js правильно, webpack-dev-server не работает. Когда я звоню http: / / [IP адрес компьютера]: 8080, он…

bundle.js не найден с webpack

Учимся использовать webpack для настройки проекта стека MERN. После запуска webpack на bundle все и запуска экспресс-сервера я вижу, что bundle.js не найден, и я вижу код состояния…

Webpack не работает (bundle.js)

Я пытаюсь создать bundle.js, но webpack не работает. Вот какая у меня ошибка: C:\Users\myname\Documents\lynda\ECMAScript6\Ch02\02_02\youtube2>webpack Invalid configuration object. Webpack has…

bundle.js не найдено [Webpack]

[UPDATE] bundle.js был фактически создан в памяти. Лучший способ-сохранить index.html и bundle.js (настроенные в webpack.config.js) в одном каталоге, чтобы избежать каких-либо проблем. Я пытался…

webpack не генерирует bundle.js

Я делаю веб-приложение, использующее react и php, и я использую webpack для es6 to js, поэтому я сгенерировал файлы, но у меня есть проблема с файлом webpack output bundle.js. это мой…

Получить / импортировать bootstrap.js из Webpack bundle.js

К сожалению, у меня нет опыта работы с webpack. У меня есть страница шаблона, сгенерированная с помощью Webpack. Страница показывает модальный диалог с bootstrap.js bootstrap.js, включенный в…

ASP.NET Core | Бандлинг и минификация

Последнее обновление: 16.12.2019

При работе со скриптами и стилями в проектах веб-приложений в самых различных технологиях нередко используются различные средства автоматизации задач. Например, одной из распространенных задач, где применяются эти средства, являются бандлинг и минификация, которые
позволяют минимизировать все используемые скрипты и стили, что позволит оптимизировать работу веб-приложения. В ASP.NET Core подобные задачи выполняются во время
разработки.

Бандлинг и минификация

У нас в проекте может быть множество файлов скриптов, стилей. Однако чем больше разных скриптов и стилей подключено на веб-странице, тем больше запросов надо совершить браузеру, а
серверу обработать. Что увеличивает нагрузку на сервер.

Скрипты и стили могут содержать множество строк. И опять же чем больше в файле строк, тем больше серверу надо передать байт на сторону клиенту. Поэтому также с ростом
размера файлов возрастает нагрузка на сервер.

Для решения этих проблем применяются два механизма: бандлинг и минификация.

Бандлинг представляет соединение скриптов или стилей в один общий файл или бандл.

Минификация представляет сокращение содержимого скриптов или стилей.

Для проведения бандлинга и минификации в веб-разработке могут применяться самые различные утилиты, инструменты, например, Grunt, Gulp. Но рекомендуемым способом именно
по отношению к ASP.NET Core является использование расширения Visual Studio — BundlerMinifier.

Для работы с BundlerMinifier нам надо загрузить и установить данное расширение по
ссылке.

Конфигурация BundlerMinifier

Конфигурация BundlerMinifier задается с помощью файла bundleconfig.json. Он определяется в в следующем формате:

[
  {
	 // настройки 1-го бандла
  },
  {
    // настройки 2-го бандла
  },
  {
    // настройки n-го бандла
  }
]

Фактически файл определяет массив бандлов. Для настройки каждого отдельного бандла применяется ряд опций:

{
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
}

Параметр outputFileName задает путь выходного файла, который будет формироваться в результате объединения файлов.

Параметр inputFiles определяет через запятую набор файлов, которые будут объединяться. То есть в данном случае из файла «wwwroot/js/site.js»
будет формироваться файл «wwwroot/js/site.min.js»

Дополнительный параметр minify указывает, будут ли минифицироваться включаемые в бандл файлы. Значение enabled: true включает минификацию.
А значение "renameLocals": true позволяет сократить имена локальных переменных.

Последний параметр sourceMap указывает, надо ли генерировать файл-карту сопоставления исходного и выходного файлов.

Применение BundlerMinifier

Создадим новый проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller). Для работы с BundlerMinifier добавим в проект ряд дополнительных стилей и скриптов:

Допустим, в папке wwwroot/css будут два файла стилей: site.css и style2.css. А в папке wwwroot/js — site.js, site2.js, site3.js.

Также добавим в проект файл bundleconfig.json (если он отсутствует в проекте). Затем изменим его следующим образом:

[
  {
    "outputFileName": "wwwroot/css/bundle.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/site2.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/site2.js",
      "wwwroot/js/site3.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

Также надо отметить, что нам необязательно исправлять файл вручную. Мы можем также выделить все нужные элементы, нажать на выделенный элемент правой кнопкой мыши и
в контекстном меню выбрать пункт Bundler & Minifier -> Bundle and Minify Files:

После выбора этой опции в диалоговом окне надо будет ввести расположение для выходного файла, в который будет собираться бандл. По умолчанию дается имя bundle.js, как указано
в файле bundleconfig.json, но его можно изменить.

После этого в папке с js-скриптами появятся новые файлы — полная и минимизированная версия файла bundle.js, который объединяется все скрипты.

Теперь перейдем в меню View -> Other Windows -> Task Runner Explorer. После этого внизу Visual Studio откроется окно
Task Runner Explorer. В этом окне нажмем правой кнопкой мыши на пункт Update all files:

При открытии контекстого меню нам надо установить привязку с помощью пункта Binding. Здесь имеются четыре типа привязки:

• Before Build: бандлы будут собираться перед построением проекта

• After Build: бандлы будут собираться после построения проекта

• Clean: бандлы будут собираться при очистке проекта

• Project Open: бандлы будут собираться при открытии проекта

К примеру выберем опцию Before Build. И далее мы сможем использовать бандлы, подключив стандартным образом:

<link rel="stylesheet" href="~/css/bundle.min.css" />
<script src="~/js/bundle.min.js"></script>

Причем не важно, что на данный момент нет таких файлов. Они будут формироваться автоматически при каждом построении проекта.

Стоит отметить, что скрипты и стили не обязательно должны располагаться в каталоге wwwroot. Например, мы можем дополнительно определить в проекте
специальную папку, например, назовем ее static, и расположить их в этой папке. А бандлы формировать и подключать из wwwroot:

В этом случае мы могли бы настроить файл bundleconfig.json следующим образом:

[
  {
    "outputFileName": "wwwroot/css/bundle.css",
    "inputFiles": [
      "static/css/*.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.js",
    "inputFiles": [
      "static/js/*.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

«Захват JS Bundle» Чудовищно медленно Oh! Android

Я решил это, НЕ используя adb, чтобы отменить мой TCP-порт 8081.

ОБНОВЛЕНИЕ 2: Я думал, что решил это, используя свое общедоступное имя IP / хоста, но оказывается, что react-native run-android создает повторно adb reverse каждый раз, когда вы его выполняете. См. UPDATE 1 внизу для соответствующих ссылок.

ОРИГИНАЛ:

Когда я изначально установил свою машину для React Native, я выполнил следующую команду, чтобы приложение React взаимодействовало с React Packager: adb reverse tcp:8081 tcp:8081 . Я заметил, что каждый раз, когда я react-native run-android на основе react-native run-android , мой эмулятор будет оставаться на «Fetching JS Bundle в течение длительного времени».

Чтобы устранить проблему с эмулятором в Windows:

1. Войдите в меню разработчика (в приложении, в эмуляторе), имитируя дрожание устройства. Открыть Additional Tools -> Accelerometer и нажмите Воспроизвести в нижней части окна, внизу Recorded data: shake .

2. Нажмите « Dev Settings (последний пункт меню).

3. Нажмите « Debug server host & port for device и установите значение для public IP/Name:Port моего ПК в сети. (Например, devpc.mynet.local:8081 или 192.168.1.99:8081 ).

4. Закройте приложение для реагирования.

5. Запустите adb reverse --remove-all чтобы отменить мою предыдущую команду adb reverse tcp:8081...

6. Перезагрузите все, начиная с моего компьютера, запустив react-native run-android . Обратите внимание, что на этот раз шаг Fetching JS Bundle выполняется почти сразу.

Я только что нашел это решение для своей собственной среды. Я не пробовал его на каких-либо реальных устройствах. Кроме того, мне интересно, есть ли способ указать это из кода, чтобы он работал правильно в первый раз (вместо того, чтобы указывать публичный IP / имя моего компьютера, запустив приложение на устройстве и установив его в настройках Dev там…)

Официальная документация:

ОБНОВЛЕНИЕ 1: Ниже приведено некоторое релевантное чтение в отношении настройки debug_http_host устройства debug_http_host .

• Проблема 2727 с возможным обходным путем – настройка через код
• Проблема 1429 с конкретным обходом IOS
• Вытяните запрос 1546, который должен был сделать эту конфигурацию, но никогда не принимался
• Жалобы о продуктах, чтобы сделать эту конфигурацию

Провел несколько дней, пытаясь увеличить скорость этого эмулятора и, наконец, получил все, что работает очень быстро и плавно.

У вас должна быть последняя версия узла. Если он устарел, он будет чудовищно медленным.

Теперь, если вам нужно закрыть сервер узлов и перезапустить «реагировать на собственный запуск андроида» после каждого небольшого изменения, которое вы делаете, ваш «наблюдатель файлов» никогда не будет установлен. Чтобы запустить загрузчик файлов, вы должны: (1) отредактировать файл yourAwesomeApp \ node_modules \ react-native \ packager \ react-packager \ src \ node-haste \ FileWatcher \ index.js (2) и изменить MAX_WAIT_TIME на Большее значение (например, 600000). Узел будет ждать, пока файловый менеджер начнет работу за это время, поэтому, если значение слишком мало, узел просто проскакивает через него и продолжает извлекать пакет. Когда файл наблюдателя идет, вы можете просто дважды нажать R, чтобы перезагрузить небольшие изменения в код, который вы делаете.

Теперь вам нужно будет увидеть все ваши console.log (). Чтобы сделать это в Genymotion (эмулятор, который я рекомендую, даже бесплатное), нажмите ctrl M с запущенным приложением и нажмите «Отладка JS удаленно». Это откроет вкладку в вашем веб-браузере ( http: // localhost: 8081 / debugger-ui ). Осмотрите эту страницу, чтобы открыть консоль!

javascript — Зачем и где вообще нам нужен bundle.js?

Откуда бандлинг?

Мы начали объединять наши активы в пакеты из соображений производительности.

• HTTP1 поддерживает ограниченное количество запросов в одном соединении. Создание соединений для каждого актива убивало производительность.
• Мы начали объединять вещи постранично, чтобы повысить производительность за счет более эффективного кэширования.
• Нам удалось добавить к нему отпечаток пальца и загрузить его в CDN.(домашняя страница.231434.js). Итак, мы смогли развернуть наше приложение, добавив его в докер.
• Bundling также помогает нам еще больше уменьшить размер страницы, потому что сборщик знает всю систему. Это означает, что он может удалить неиспользуемые вещи и упростить минимизацию. Вы не можете обойтись без упаковщика.
• Также упаковщики используют транспилеры. Браузеры не всегда могут запускать коды, которые мы пишем, например, Typescript, CoffeeScript. Составители пакетов могут легко преобразовывать эти коды в пакеты.

Это еще нужно?

В настоящее время многое меняется, как мы объединяем наши активы.

• Во-первых, почти все браузеры теперь поддерживают HTTP / 2. Таким образом, мы можем запросить несколько файлов по одному и тому же соединению. Объединение из-за этого больше не требуется. Также у нас есть HTTP / 2 server push.
• Библиотеки, такие как React, Angular, Vue, намного эффективнее по размеру. Их можно легко загрузить на страницу из источника, поддерживающего gzip.

Это причины, по которым нам больше не нужна комплектация.

Но, исходя из вашего проекта, нам может понадобиться комплектация.Это настоящая правда.

Я бы еще пошел с комплектацией.

В моей компании мы используем систему оркестровки контейнеров для управления нашими докеризованными приложениями. Мы можем запускать несколько версий одновременно. Создание отпечатков пальцев для файлов при их объединении и загрузке в CDN по-прежнему более эффективно для нас. А также мы пытаемся использовать предварительную выборку и предварительную загрузку. CDN помогает нам сократить время загрузки посетителей из других стран.
Кроме того, мы получаем поддержку от обслуживающего персонала, чтобы изменить ресурсы, когда нам это нужно, по страницам.

Так что в настоящее время он основан только на вашем проекте. Больше нет особых причин для производительности.

пакет-js · GitHub

Пакет JS минимальной конфигурации с батареями

Гипотетический сборщик JavaScript . bundle-js призван быть вашим универсальным магазином для всего, что есть во внешнем интерфейсе JS. Голы:

 пакет-js index.js -o bundle.js
# дает вам bundle.js и bundle.js.map 

 константный пакет = требуется ('пакет-js')

// один проход
пакет ('index.js')
.then (результат => {
  result.code
  result.map
}) 

 пакет-js --no-bundle src lib 

 Параметры пакета: (накопительный пакет)
  -f, --format cjs bundle как модуль CommonJS
  -f, --format amd bundle как модуль AMD
  -f, --format umd bundle как UMD Bundle (для браузеров)
      --module-name ИМЯ имя модуля

  -u, --umd ИМЯ то же, что и `--format umd --module-name NAME`

      --compress сжать конечный результат
      --no-bundle только transpile (не связывать)

Варианты транспиляции: (бакл.)
      --jsx прагма PRAGMA
      --target БРАУЗЕРЫ нацелены на определенные браузеры (--target [--chrome 48 --firefox 21])

Другие варианты:
      - смотреть, работать постоянно и восстанавливать при любых изменениях 

 / * package.json * /
"bundle-js": {
  // некоторые параметры передаются в buble
  "jsx": "decca.element",
  "target": {"chrome": 48},

  // некоторые параметры передаются в свертку
  "globals": {
    "backbone": "Магистраль"
  }
} 

 npm install --save-dev rollup-plugin-json 

 / * упаковка.json * /
"bundle-js": {
  "rollup-plugin-alias": {
    "лево право"
  }
} 

  пакет-js --eject> rollup-config.js
  

 // Инструкции:
//
// 1. Сохраните этот файл как rollup.config.js.
// 2. Измените пакеты npm (см. Ниже).
//
// удаление npm --save bundle-js
// npm install --save rollup buble rollup-plugin-buble rollup-plugin-commonjs
//
// 3.Запустить накопительный пакет:
//
// ./node_modules/.bin/rollup -c rollup-config.js input.js -o output.js

импортировать buble из 'rollup-plugin-buble'
импортировать cjs из 'rollup-plugin-commonjs'

const bubleOptions = {
  цель: {chrome: 24}
}

экспорт по умолчанию {
  запись: 'index.js',
  формат: 'cjs',
  плагины: [cjs (), buble (bubleOptions)]
} 

  git clone https://github.com/sitepoint-editors/webpack-static-site-example
cd webpack-статический-сайт-пример
npm install
  

  npm установить webpack webpack-cli --save-dev
  

  мкдир р-н
  

  ./node_modules/webpack/bin/webpack.js ./src/js/main.js --output-filename = bundle.js --mode = development
  

  asset bundle.js 1,04 КБ [выпущено] (имя: основной)
./src/js/main.js 192 байта [построено] [сгенерировано кодом]
webpack 5.1.3 успешно скомпилирован за 45 мс
  

  "скрипты": {
  "test": "echo \" Ошибка: тест не указан \ "&& exit 1",
  "build": "webpack ./src/js/main.js --output-filename = bundle.js --mode = development "
},
  

  сенсорный webpack.config.js
  

  module.exports = {
  запись: './src/js/main.js',
  режим: 'разработка',
  выход: {
путь: `$ {__ dirname} / dist`,
имя файла: 'bundle.js',
  },
};
  

  "скрипты": {
  ...
  "build": "webpack"
},
  

  сенсорный src / js / app.js
  

  требуется ('./ main.js');
  

  запись: './src/js/app.js',
  

  
<скрипт src = "./src/js/main.js "> 
  

 

  окно. $ = Require ('jquery');
требуется ('./ main.js');
  

 
require ('../ css / main.css');


window. $ = require ('jquery');
требуется ('./ main.js');
  

  module.exports = {
  ...
  модуль: {
правила: [
{
тестовое задание: /\.css $ /,
использовать: [
'загрузчик стилей',
'css-loader',
],
},
],
  },
};