Minimize the browser pugjs size?

pugjs / pug

Pug – robust, elegant, feature rich template engine for Node.js

https://pugjs.org

21.68k stars 1.95k forks source link

Minimize the browser pugjs size? #2653

Closed LeonDWong closed 7 years ago

LeonDWong commented 7 years ago

Pugjs in browser is nearly 500K.Anyway to minimize it?Thx.

aMarCruz commented 7 years ago

@LeonDWong , I think including the compiler in browsers is not a good idea. Some tips:

Use the Pug plugin for your blunder (pugjs-brunch, rollup-plugin-pug, gulp-pug, etc) to avoid loading the pug compiler at runtime.
If you know the values used by your template at compile-time, use static compilation if your plugin allows it.

LeonDWong commented 7 years ago

@aMarCruz It's a good idea to render pug template in server end or compile it to html by tools(like brunch, gulp, etc).But if i get a piece of pug template from server and data is in browser, i have to render them via browser end compiler.So i still try to find the way to minimize Pugjs in browser.

ForbesLindesay commented 7 years ago

You can compile the template to JavaScript on the server side using pug.compileFileClient or the --client flag on the CLI. This still lets you add the data on the client, but means you won't need the full pug compiler.

LeonDWong commented 7 years ago

@ForbesLindesay Thx.It's sort of tricky, but i still wonder is it impossible to minimize the size of Pugjs in browser?

ForbesLindesay commented 7 years ago

No, it can't really be reduced in size, since it is a full compiler. This is what allows pug to be a powerful templating language. Even if we could reduce the file size, the compilation process is far too slow to run on every client's browser. We also make no effort to make that code work in anything other than the latest version of google chrome.

If you need a templating language that is simple enough to build in the browser, I suggest somethign like: https://mustache.github.io/

getflourish commented 7 years ago

I love using jade/pug in the browser for interactive demos and it makes it a great candidate for component based design tools. jade.js used to be 41k minified and was blazing fast to compile templates in the browser. I’m curious: why is the file size of pug.js 10x bigger and thus also slower?

ForbesLindesay commented 7 years ago

It was always slow. We have optimised for the pre-compiled use case as that is the only way to get reasonable performance. The trade off is that compiling on the fly is now slower.