Templating libraries: include only the runtime

[danburzo]

There are certain JavaScript libraries that make use of their own templating languages. In a Webpack-built project, if you keep all your templates as separate files, you can use a specialized loader to get the pre-compiled version in your code. If the library supports it, you can exclude the parsing part from the bundle.

For example, we have some parts of our app that use Ractive(v0.6) , and we're using ractive-loader to load them. Previously, we'd included the whole Ractive library in the bundle, but we've shaved off a hefty part of it by doing this in our Webpack config:

resolve: {
    alias: {
      ractive: path.resolve(__dirname, 'node_modules/ractive/ractive.runtime.min.js')
    }
}

I'm sure this is applicable to more libraries, are there similar opportunities?

[iamakulov]

Oh wow, that’s a nice optimization opportunity!

Other examples I can think of (we need to test them though, preferably in a real application):

• Handlebars: handlebars → handlebars-loader + handlebars/runtime
• Mustache: mustache → mustache-loader (and, probably, mustache can be dropped after that)
• EJS: ejs → ejs-loader (and, probably, ejs can be dropped after that)

[iamakulov]

Want to make a PR? :–) (Either with ractive only – I’ll test and add other libraries myself – or with the mentioned libraries too)

[danburzo]

Sure, I'll make a PR with a few examples for libraries I find include their parser in their default entry point.