Является ли правильной упаковка JS lib / plugins и, возможно, CSS-файлов в один файл?

Question

Я знаю, что в настоящее время разработчики хотят уменьшить количество запросов, отправляемых веб-страницей, которая включает файлы JavaScript и CSS, и есть некоторые исполнители задач и упаковщики, такие как Webpack и gulp, которые помогают вам упаковывать все сценарии и стили либо из вашей собственной работы и / или плагин / lib в один файл скрипта, но вопрос в том, правильно ли это делать?

Например, проект, который использует react, redux, react-redux, может иметь один файл сценария, который включает в себя все эти библиотеки, а также сценарии проекта, возможно, uglified / minified для + 1MB.

как многие веб-сайты или веб-приложения в настоящее время используют такую ​​библиотеку, не лучше ли, чтобы эти библиотеки добавлялись из некоторых CDN, что помогает пользователям не перезагружать их, если их браузер уже кэширован?

Надеюсь, мой вопрос достаточно ясен :) веселит

Answer 1

Нет, это не так.Лучшее решение - разделение кода.Где у вас есть несколько небольших файлов, которые будут загружаться только при необходимости.Этого также можно достичь с помощью веб-пакета.«Лучшее» решение - это, например, иметь реакцию + избыточность в одном файле, и это можно сразу же загрузить.Если другие зависимости не требуются для всего приложения, они должны быть загружены с отложенной загрузкой.

Идеальный сценарий:

Учитывая, что у вас есть vendor.js, содержащий response + redux (используется в целомприложение).

Одна страница, на которую, например, вы импортируете moment.js.

Пользователь заходит на сайт -> загрузки реагирует + пакет редукса (теперь кэшируется) -> переходит на другую страницу-> загружает файл moment.js.

Что-то в этих строках.

Полезные ресурсы: https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 (с использованием веб-пакета 3, но легко переносимого в веб-пакет 4).Также ищите splitChunks в документах webpack (https://webpack.js.org)