Как уменьшить размер выходных файлов webpack?

Question

[Александр Белькевич]

Здравствуйте. Недавно стал работать с webpack, первый проект делаю. Подскажите, как уменьшить выходные js файлы?
У меня их 2:
1. Собирает в себе все js-файлы нужные из модулей
2. Работа с js (свои скрипты)

На самом деле своего js мало. Просто интересно было попробовать инструмент. На выходе получается 2 файла: один 800кб, второй - 3мб. Это жуть как много.

В первый файл я беру библиотеки таким образом

import bootstrap from './../node_modules/bootstrap/dist/js/bootstrap.js';
import './libs/jquery.maskedinput.js';
import './../node_modules/moment/min/moment.min.js';
import './../node_modules/moment/min/locales.js';
import './../node_modules/moment/locale/ru.js';
import './libs/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js'
import './../node_modules/bootstrap-select/dist/js/bootstrap-select.js';
import './../node_modules/jquery-bar-rating/dist/jquery.barrating.min.js';
import './../node_modules/ion-rangeslider/js/ion.rangeSlider.js';
import './app.sass';

Ну во втором просто немного своего кода. Как мне оптимизировать эти файлы? Может я вообще в корне не так все делаю?

Answer 1

[Александр Белькевич]

Спасибо всем. Проблема была в source-map. Подключался inline. После того как убрал его - сборка похудела в 4 раза

Answer 2

[Alexander]

Как собираете, конфиг/версия вебпака?
Если я правильно понял, то второй файл - в котором немного кода - он весит 3 мб? Звучит как несжатый вебпак бандл.

Советы:
0) Сделать сборку для продакшена, если не делаете - https://webpack.js.org/guides/production/;
1) Проанализировать бандлы с помощью https://www.npmjs.com/package/webpack-bundle-analyzer, посмотрите кто дает столько размера;
2) Перейти на Webpack 3, с ним бандлы становятся меньше (но это не точно);
3) Вы выносите скомпилированный sass в отдельный css файл? Или все это добро тоже уходит в бандл?

Answer 3

[Дмитрий Петрик]

Подключайте скрипты через CDN в html страницу. У вебпака в конфиге укажите что будут использоваться внешние библиотеки типа так:

module.exports = {
  ...
  externals: {
    "bootstrap": "bootstrap",
    "moment": "moment",
  },
  ...
}

Эти библиотеки не будут включены в сборку