고급 컴파일

일반적인 빌드 프로세스는 Google의 온라인 JavaScript 컴파일러를 사용하여 Blockly를 총 720KB (압축 시 160KB)의 파일 6개로 줄입니다. 또는 다음과 같은 여러 이점이 있는 '고급 컴파일' 모드에서 Google의 오프라인 JavaScript 컴파일러를 사용할 수 있습니다.

  • 트리 셰이킹으로 인해 총 Blockly 크기가 300kb (압축 시 100kb)로 감소했습니다.
  • 로컬 컴파일러 실행으로 인해 빌드 시간이 단축되고 네트워크 트래픽이 발생하지 않습니다.
  • 무제한 컴파일 (온라인 컴파일러는 비율 제한이 적용됨)

설정

이 최소 튜토리얼에서는 Blockly 루트 디렉터리에 새 디렉터리를 만들어 시작합니다.

Closure Compiler를 다운로드합니다.

compiler.jar을 다운로드하고 closure-compiler.jar로 이름을 바꾼 후 디렉터리에 배치합니다.

명령줄에서 다음을 실행하여 Java 런타임 환경이 컴파일러를 실행할 수 있는지 확인합니다.

java -jar closure-compiler.jar --version

보일러 플레이트

먼저 최소한의 Blockly 도구 상자와 이를 삽입할 div를 정의하는 HTML 파일을 만듭니다. 이렇게 하려면 디렉터리에 다음 코드가 포함된 index.html이라는 파일을 만듭니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.js"></script>
  <script src="../msg/en.js"></script>
</head>
<body>
  <h1>Blockly: Advanced Compilation</h1>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
</body>
</html>

Blockly 경로와 원하는 언어에 맞게 언어 경로 (../msg/en.js)를 수정해야 합니다.

두 번째로, Blockly와 필요한 메시지 파일 또는 블록 정의를 로드한 다음 제공된 div에 Blockly를 삽입하는 JavaScript 파일을 만듭니다. 이렇게 하려면 디렉터리에 다음 코드가 포함된 main.js이라는 파일을 만듭니다.

goog.provide('Main');
// Core
goog.require('Blockly.requires');
// Blocks
goog.require('Blockly.Constants.Logic');
goog.require('Blockly.Constants.Loops');
goog.require('Blockly.Constants.Math');
goog.require('Blockly.Constants.Text');

Main.init = function() {
  Blockly.inject('blocklyDiv', {
    'toolbox': document.getElementById('toolbox')
  });
};
window.addEventListener('load', Main.init);

컴파일

명령줄에서 Closure Compiler를 실행하여 main.js, Blockly, Closure Library를 함께 컴파일합니다.

java -jar closure-compiler.jar --js='main.js' \
  --js='../blocks/**.js' \
  --js='../core/**.js' \
  --js='../generators/**.js' \
  --generate_exports \
  --externs ../externs/svg-externs.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --dependency_mode=PRUNE --entry_point=Main \
  --js_output_file main_compressed.js

또는 고급 컴파일 스크립트를 사용합니다.

 npm run test:compile:advanced

브라우저를 index.html로 지정하여 모든 것이 작동하는지 확인합니다.

더 고급

크기를 더 줄이려면 애플리케이션에서 실제로 사용하는 Blockly 구성요소만 포함하면 됩니다. 예를 들어 애플리케이션이 휴지통을 갖도록 구성되지 않은 경우 컴파일되는 구성요소 목록에서 휴지통을 삭제할 수 있습니다. 이렇게 하려면 코드에서 Blockly.requires 요구사항을 삭제하세요.

// Core
goog.require('Blockly.requires');

대신 core/requires.js을 열고 모든 require 문을 코드에 복사합니다. 그런 다음 필요하지 않은 항목은 주석 처리하면 됩니다.

Closure Compiler는 컴파일된 출력에서 라이선스를 보존합니다. 이 출력 파일에서 Google의 Apache 라이선스를 삭제하여 크기를 더 줄여도 됩니다.

Closure Compiler에는 다양한 기능과 옵션이 있으므로 문서를 확인하세요.