在 Freemarker 文件中导入 Javascript 和 CSS 样式表对性能有何影响？

Question

I am working on a project where we use the Freemarker template engine for the front end. A lot of files in the project have a similar structure, in importing some 3rd party libraries and stylesheets like JQuery, Bootstrap, ect. For the sake of consistency, one of the developers suggested having one file as a standardized template containing a header section and scripts. And we import this file into all other files. As a result, any one file into which this template is being imported into will have a lot of unused scripts and stylesheets.

Are there any criticisms with this approach, as opposed to importing scripts in a case by case basis? Does it effect performance? These scripts are being loaded from some standard CDNs and the app will eventually be hosted on a AWS server.

Answer 1

No, there is no real criticism with this approach, as it makes use of Freemarker's ability to provide reusable and modular UI. However, this is more of good coding practising than performance. You should create reusable UI components whenever you could, and header is one main example.

It's good for code integrity and readability to define a template for header header.ftl or head.ftl and import it from all your pages, and even do the same for main menu and footer as well.

To ramp up performance with Freemarker consider switching on Freemarker caching from Java, XML, or properties config based on your app type. Combining caching with recuction of code size through re-usability will help page loading time.