๐ŸŒWeb Bundles๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”๐Ÿ“ฆ

4220 ๋‹จ์–ด google์›น

Web Bundles๋Š”?



์‘์šฉ ํ”„๋กœ๊ทธ๋žจ (์›น ์‚ฌ์ดํŠธ)์„ ๋‹จ์ผ ํŒŒ์ผ๋กœ ๋ฌถ์€ ํŒŒ์ผ ํ˜•์‹ .wbn
  • ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ ์—†์ด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ .wbn ํ˜•์‹์— ๋”ฐ๋ผ Bluetooth ๋˜๋Š” Wi-Fi๋กœ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋“ฑ๋“ฑ
    htps : // ์šฐใ‡ b. ์—์„œ v

    โ€ปํ˜„์žฌ๋Š” Google Chrome version 80 later or Google Chrome Canary์˜ ํ™•์žฅ ํ”Œ๋ž˜๊ทธ๋ฅผ ์˜จ์œผ๋กœ ํ•œ ์ƒํƒœ์—์„œ๋งŒ ์—ด๋žŒ ๊ฐ€๋Šฅํ•œ ๋ชจ์–‘.

    ๋„์ž…ํ•ด ๋ณด์ž



    ์ต์ˆ™ํ•œ Node.js์˜ npm์—์„œ๋„ ๋นŒ๋“œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
    โ€ปnpmํŒ์€ ํ˜„์‹œ์ ์—์„œ origin-signe ๋นŒ๋“œ์— ๋Œ€์‘ํ•˜๊ณ  ์žˆ์ง€ ์•Š์€ ๋ชจ์–‘
  • ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ„ฐ๋ฆฌ & ์•„ํ‹ฐํŒฉํŠธ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ์ค€๋น„ํ•˜๊ณ  ํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋„ฃ์œผ์‹ญ์‹œ์˜ค
  • โ”€โ”€ dist
        โ”œโ”€โ”€ assets
        โ”‚   โ”œโ”€โ”€ css
        โ”‚   โ”‚   โ””โ”€โ”€ style.css
        โ”‚   โ”œโ”€โ”€ images
        โ”‚   โ”‚   โ””โ”€โ”€ foo.jpg
        โ”‚   โ””โ”€โ”€ js
        โ”‚       โ””โ”€โ”€ app.js
        โ”œโ”€โ”€ index.html
        โ””โ”€โ”€ pages
            โ””โ”€โ”€ ex01
                โ””โ”€โ”€ index.html
    

    Golang ๋ฒ„์ „



  • ๊ฐ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์™€ ํ•จ๊ป˜ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ  ์„ค์น˜
  • ๋‹ค๋ฅธ ์–ธ์–ด์—์„œ ์˜จ ์‚ฌ๋žŒ์ด Go๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ•˜์ž๋งˆ์ž ๋น ์กŒ๊ณ  ๊ทธ ๋Œ€๋‹ต
  • htps : // ์ฝ” m / ๋ฌด๋ชจ์Šˆ / ms / 0d2f2 13c6 9fc8

  • go bundle๋„ ํ•„์š”ํ•˜๋ฏ€๋กœ ๋„ฃ๋Š”๋‹ค
    $ go get -u github.com/WICG/webpackage/go/bundle/cmd/...
    
  • PATH๋ฅผ ํ†ต๊ณผ
  • $ echo 'export GOPATH="$HOME/.go"'  >> ~/.bash_profile
    $ echo 'export GOPATH="$GOPATH/bin:$PATH"'  >> ~/.bash_profile
    
  • ๋นŒ๋“œ
  • $ gen-bundle -dir dist -baseURL https://example.org/ -primaryURL https://example.org/ -o app.wbn
    

    ๋ฒˆ๋“ค ํ˜•์‹์—๋„ ์—ฌ๋Ÿฌ ์ข…๋ฅ˜ ์˜ต์…˜์ด ์žˆ๋Š” ๋ชจ์–‘
    htps : // ๊ธฐ์ฃผ b. ์ฝ” m / ใƒ CG / ใ‡ b ใ‚œ ใ„ด

    npm ๋ฒ„์ „


  • ํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— wbn ํŒจํ‚ค์ง€ ์„ค์น˜
  • $ npm i -D wbn
    
  • ๋นŒ๋“œ
  • npx wbn --dir dist --baseURL https://example.org/ --output out.wbn
    

    ์ƒ์„ฑ ๋œ .wbn ํŒŒ์ผ์„ Google Chrome Canary์—์„œ ์—ฝ๋‹ˆ ๋‹ค.


    chrome://flags/#web-bundles
    

    URL ๋ฐ”์— ์ž…๋ ฅ ํ›„, Web Bundles ๋ฅผ Enabled ๋กœ ํ•˜๊ณ , ์ƒ๊ธด .wbn . .



    CSS, JavaScript ๋ฐ ์ด๋ฏธ์ง€๋„ ๋ง ๊ทธ๋Œ€๋กœ 1๊ฐœ์˜ ํŒŒ์ผ์— Bundle ๋˜์–ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๐Ÿ“ฆ

    ํŒŒ์ผ ํฌ๊ธฐ๋Š” ...


    dist ๋””๋ ‰ํ† ๋ฆฌย 312 KBapp.wbn 296 KB(Go)out.wbn 282 KB (npm)

    ๋ผ๋Š” ๋Š๋‚Œ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

    ๋””์ง€ํ„ธ ์„œ๋ช… ์„ ๋ถ€์—ฌํ•œ Bundle๋“ฑ๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    .wbn ๋‚ด์šฉ์€ CBOR ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.



    htps : // c๋ณด r. ์ด์˜ค/
    [CWT ์ž…๋ฌธ ๊ทธ 1] CBOR์— ์˜ํ•œ ์˜ค๋ธŒ์ ํŠธ์˜ ๋ฐ”์ด๋„ˆ๋ฆฌ ํ‘œํ˜„
    ๋ฐฐ๋‚˜๋ฆฌ

    ๋ฌธํ—Œ



    Get started with Web Bundles
    htps : // ๊ธฐ์ฃผ b. ์ฝ” m / ใƒ CG / ใ‡ b ใ‚œ ใ„ด
    htps //w w. ์Œ pmjs. ์ฝ” m / Pac ์นด๊ฒŒ / wb
    Google, Chrome ์›น ์•ฑ์„ ๋„ค์ดํ‹ฐ๋ธŒ ์ˆ˜์ค€์œผ๋กœ ๊ฐ€์†ํ™” 'Web Bundles' ๊ณต๊ฐœ
    WebBundle์„ ํ†ตํ•œ ์ฝ˜ํ…์ธ  ๋ณ‘ํ•ฉ ๋ฐ WebPackaging
    2020๋…„ ์›น ํ‘œ์ค€

    ์ƒ˜ํ”Œ

    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ