Twitter Bootstrap: меньше времени на компиляцию

Я пишу простое приложение, используя Twitter Bootstrap. В моем основном файле HTML у меня есть следующие строки:

<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>

поэтому каждый раз, когда я обновляю страницу, создается весь css. Каждый раз это занимает около 15 секунд, так что ожидание загрузки страницы утомительно.

Я попытался использовать SimpLESS для создания CSS из меньшего количества файлов, но генерация не удалась. Я попытаюсь заставить это работать, но мне также интересно, не делаю ли я что-то не так...

Мне не нравится тот факт, что css генерируется каждый раз, даже если я не меняю меньше файлов. Есть ли способ как-то сделать меньше кеша css? Или, возможно, есть другие альтернативные решения этой проблемы?


css twitter-bootstrap less
person machinery    schedule 01.09.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

Я бы также предложил профилировать JavaScript (в Chrome есть хороший профилировщик JS), чтобы увидеть, не появится ли что-нибудь очевидное, например функция, связанная с LESS, которая работает медленно и вызывается повторно.

Вот моя общая стратегия LESS, которая может быть вам полезна в будущем. Я использую Visual Studio и ASP.Net, но вы можете делать это в различных средах.

  • Самое главное, никакого JavaScript для LESS. Все делается на стороне сервера.

  • В процессе разработки я запрашиваю файлы .less через HTTP-обработчик dotLess, который их обрабатывает и выполняет кэширование. Время от времени кеш дает сбои, и мне приходится перезапускать локальный веб-сервер, но это не имеет большого значения. Это позволяет мне вносить изменения в свой less в реальном времени и видеть их, просто обновляя страницу. Это также быстро.

Пример: <link rel="stylesheet" href="foo.less" />

  • Для производства я использую действие сборки для компиляции файлов .less в один файл CSS и ссылки на файл CSS непосредственно на странице. Это убирает все динамическое из уравнения.

Пример: <link rel="stylesheet" href="final.css" />

person Tim Medora    schedule 01.09.2012
comment
Спасибо, это хороший совет. Я использую django... Я думаю, что мой эквивалент вашего подхода будет состоять в том, чтобы заставить SimpLESS работать, что позволит мне иметь все поколение на сервере. - person machinery; 01.09.2012
comment
Генерация сервера лучше всего, хотя мне было бы любопытно узнать, почему версия JS такая медленная. - person Tim Medora; 01.09.2012
comment
Хм.. меня это тоже удивляет. Я только что загрузил сгенерированную inializr версию Bootstrap и еще не изменил меньше файлов... Так что это чистая готовая версия. - person machinery; 01.09.2012
comment
Вы получаете одинаковое поведение в разных браузерах? - person Tim Medora; 01.09.2012
comment
Хм... только что проверил, и результаты меня весьма удивили. Chrome, FF и Opera занимают обычно около 10 секунд. IE занимает только 1-2. Однако мне удалось заставить работать генерацию SimpLESS благодаря этой ссылке: Initializr сгенерировал bootstrap">stackoverflow.com/questions/11683600/ Теперь я просто дам ссылку на css, и он должен работать быстро во всех браузерах :) - person machinery; 02.09.2012

arrow_upward
2
arrow_downward

вам нужна каждая часть из Bootstrap? Потому что много кода раздувания.

Попробуйте отключить часть основного файла начальной загрузки:

Вам нужны все части CSS для JavaScript?

Вам нужен «код» и «таблицы»?

В «отзывчивых утилитах» можно многое закомментировать, если вам это не нужно.

Позвольте мне показать вам мою настройку, она в SASS, но принцип остается прежним:

// Compass utilities
@import "compass";

// Core variables and mixins
@import "includes/variables";
@import "includes/mixins";

// Reset
@import "includes/normalize";
@import "bootstrap/print";

// Core CSS
@import "includes/scaffolding";
@import "includes/type";
//@import "bootstrap/code";
@import "includes/grid";
//@import "bootstrap/tables";
@import "includes/forms";
@import "includes/buttons";

// Components: common
@import "includes/component-animations";
@import "bootstrap/glyphicons";
//@import "includes/dropdowns";
@import "includes/button-groups";
//@import "bootstrap/input-groups";
//@import "bootstrap/navs";
//@import "includes/navbar";
//@import "bootstrap/breadcrumbs";
//@import "bootstrap/pagination";
//@import "bootstrap/pager";
//@import "bootstrap/labels";
//@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
//@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "includes/close";

// Components w/ javascript
@import "includes/alerts";
@import "bootstrap/modals";
//@import "bootstrap/tooltip";
@import "includes/popovers";
//@import "includes/carousel";

// Utility classes
@import "bootstrap/utilities"; // Has to be last to override when necessary
@import "bootstrap/responsive-utilities";

//custom styling
@import "includes/customstyles";
person Mark    schedule 19.11.2013