Минимизировать приложение фляги, когда шаблоны имеют встроенный JS?

Обычное соглашение перед развертыванием приложения заключается в том, чтобы минимизировать все активы (css, html, js). Как правило, это предполагает, что все активы находятся в независимом файле (то есть, все JS кода в /js/mycode.js, что делает Минимизацию активов проще.Минимизировать приложение фляги, когда шаблоны имеют встроенный JS?

Однако, я написал кучу шаблонов jinja2, которые имеют <script> тегов в них, и они используют переменные шаблона.Это было полезно для быстрого написания пользовательского интерфейса быстро, но мне интересно, какой лучший способ перенести все это в один файл js, чтобы позже я мог выполнить минимизацию?

Например , У меня много шаблонов со встроенными js:

<div class="some_content"> 
    <button>{{mytext}}</button> 
</div> 
<script> 
    $(".some_content button").click(function() { 
     $(this).text("{{new_text}}"); 
     $.post("{{url_for('doit', name=name)}}", function() { 
      console.log('Done!'); 
     }); 
    }); 
</script>

Я aw что я могу наполнить код js в файл, а затем сделать {% include 'mycode.js' %}, но тогда я бы импортировал ВСЕ мой код js в шаблон. Некоторые шаблоны имеют наследование, поэтому выполнение оператора include приведет к тому, что файл будет загружать целые сценарии несколько раз на страницу (не очень хорошо). И я не уверен, как в том числе такие скрипты, как это будет работать с минимизацией.

Есть ли хороший способ переместить весь встроенный JS-код во внешний файл, не теряя при этом преимуществ переменных шаблона jinja2, чтобы я мог минимизировать свой javascript? Вернее, что это хороший способ минимизировать все мои встроенные JS?

источник

2015-09-05 rublex

Я просто не стал бы беспокоиться. Оставьте динамический JS в шаблонах, пока не сможете доказать, что существует реальная проблема с пропускной способностью (там не будет, если вы не являетесь размером переполнения стека). – davidism

Вы можете использовать jinja-assets-compressor для этого.

https://github.com/jaysonsantos/jinja-assets-compressor

app.py

from jac.contrib.flask import JAC 
from flask import Flask, render_template 
import jinja2 
from jac import CompressorExtension 

app = Flask(__name__) 
app.config['COMPRESSOR_DEBUG'] = app.config.get('DEBUG') 
app.config['COMPRESSOR_OUTPUT_DIR'] = './static' 
app.config['COMPRESSOR_STATIC_PREFIX'] = '/static' 
jac = JAC(app) 

env = jinja2.Environment(extensions=[CompressorExtension]) 
env.compressor_output_dir = './static' 
env.compressor_static_prefix = '/static' 
env.compressor_source_dirs = './static_files' 


@app.route("/") 
def hello(): 
    return render_template('index.html', name='rublex') 

if __name__ == "__main__": 
    app.run()

index.html

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title>Flask test</title> 
    </head> 
    <body> 
     <h1>Hello World</h1> 
     <button onclick="sayHi()">Say Hi</button> 

     {% compress 'js' %} 
     <script> 
      function sayHi() { 
       alert('{{ name }}'); 
      } 
     </script> 
     {% endcompress %} 
    </body> 
</html>

Выходы JS

<script type="text/javascript" src="/static/62280e86f267fdbbd0cd10bb7b5ae3dc.js"></script> 

function sayHi(){alert('rublex');}

источник

2015-09-06 13:59:08 duffn

Минимизировать приложение фляги, когда шаблоны имеют встроенный JS?

ответ

Смежные вопросы