AlexBelkevich
@AlexBelkevich
Нет нерешаемых задач. Есть деревянные клиенты

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

Здравствуйте. Недавно стал работать с 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';


Ну во втором просто немного своего кода. Как мне оптимизировать эти файлы? Может я вообще в корне не так все делаю?
  • Вопрос задан
  • 635 просмотров
Решения вопроса 1
AlexBelkevich
@AlexBelkevich Автор вопроса
Нет нерешаемых задач. Есть деревянные клиенты
Спасибо всем. Проблема была в source-map. Подключался inline. После того как убрал его - сборка похудела в 4 раза
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
boratsagdiev
@boratsagdiev
Как собираете, конфиг/версия вебпака?
Если я правильно понял, то второй файл - в котором немного кода - он весит 3 мб? Звучит как несжатый вебпак бандл.

Советы:
0) Сделать сборку для продакшена, если не делаете - https://webpack.js.org/guides/production/;
1) Проанализировать бандлы с помощью https://www.npmjs.com/package/webpack-bundle-analyzer, посмотрите кто дает столько размера;
2) Перейти на Webpack 3, с ним бандлы становятся меньше (но это не точно);
3) Вы выносите скомпилированный sass в отдельный css файл? Или все это добро тоже уходит в бандл?
Ответ написан
Комментировать
Подключайте скрипты через CDN в html страницу. У вебпака в конфиге укажите что будут использоваться внешние библиотеки типа так:
module.exports = {
  ...
  externals: {
    "bootstrap": "bootstrap",
    "moment": "moment",
  },
  ...
}

Эти библиотеки не будут включены в сборку
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы