Otimizando o site do Middleman de página única

O site de uma única página é ainda melhor quando o usuário baixa o conteúdo completo em uma solicitação HTTP. Nenhuma solicitação adicional para arquivos CSS e JavaScript. Middleman lida muito bem com a otimização do tamanho do arquivo , então a única coisa que você deve fazer é inlining assets. Todos os exemplos de código são retirados da documentação da API criada no Slate .

Ativos embutidos no layout

<style media="screen"><%= sprockets.find_asset('screen.css').to_s %></style>
<style media="print"><%= sprockets.find_asset('print.css').to_s %></style>
<script><%= sprockets.find_asset('all.js').to_s %></script>

Reduzindo o conteúdo

Use a opção inlinede reduzir ativos em tags html. Se possível, também gzip o arquivo html. No meu caso, o gzip economizou 200kB quando o ativei para a documentação da API .

configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
  activate :minify_html
  activate :asset_hash
  activate :gzip
end

Ignorando ativos

Não se esqueça de ignorar ativos durante o processo de construção. É perda de tempo construir ativos embutidos. Você pode ignorar os diretórios de ativos em config.rb ou usar diretórios ignorados para ativos. Eu prefiro o último.

# ignore (public) assets directory
set :css_dir, 'assets/css'
set :js_dir, 'assets/js'
ignore 'assets/*'

# OR use excluded assets directories
set :css_dir, 'assets/_css'
set :js_dir, 'assets/_js'