Static assets
Managing static assets in Odoo can be quite challenging due to its
large codebase and wide range of applications. Each Odoo module
serves different purposes and offers unique user interfaces, which
makes asset management more complex compared to simpler
applications. For example, the asset needs for a website, Point of
Sale (POS), web client, or mobile app can vary significantly. Some
assets may also be large in size but are rarely used. In such cases,
using lazy loading is a practical solution to avoid loading
unnecessary files upfront. Loading too many unused assets can
negatively affect performance, so it’s best to load them only when
they’re actually needed. To handle this efficiently, it’s
recommended to organize assets into separate bundles for each part
of Odoo’s codebase.
Managing Static Assets
Modern websites typically include numerous JavaScript and CSS files.
When a page loads in the browser, these static files generate
multiple requests to the server. An excessive number of requests can
slow down the website’s performance. To overcome this, many websites
combine several files to reduce the number of requests and serve
static assets more efficiently. While there are various tools
available for managing these assets, Odoo uses its own method to
handle static file management.
Asset types
Odoo categorizes its assets into three types: templates, which are
XML files; stylesheets, which are CSS or SCSS files; and scripts,
which are JavaScript files.
1.Script (JavaScript files)
Odoo supports three types of JavaScript files, all of which are
bundled and delivered to the browser. These include plain JavaScript
files, native JavaScript modules, and Odoo-specific modules. For any
newly developed JavaScript, it is recommended to use the native
JavaScript module system. Odoo modules represent a custom JavaScript
system where files are processed, minified, and combined when asset
debug mode is disabled. The final output is saved as an attachment
and is typically loaded into static files using the <script>
tag.
2. Style (CSS or SCSS files)
Styling in Odoo can be done using either CSS or SCSS files. These
style files are processed in a similar way to JavaScript files—they
are minified and combined unless the system is in asset debug mode.
SCSS files are first compiled into CSS. The final output is saved as
an attachment and is usually loaded into static files through the
tag.
3.Templates (XML files)
In Odoo, a template is a static XML file. Similar to JavaScript and
style files, templates are treated as read-only and are eventually
combined in small segments when required. When Odoo loads in the
browser, it makes a request to /web/webclient/qweb/controller to
retrieve these templates. Odoo’s primary template engine is QWeb, an
XML-based engine mainly used to render HTML pages and fragments.
Template directives are defined using XML attributes prefixed with
t-. These include conditional statements like t-if that control the
rendering of components and other elements within the template.
It’s important to note that the browser sends these requests only
when the page is loaded. This happens because the page source
contains a list that references all the associated assets.
Additionally, a checksum is appended to the asset URLs. This
approach allows cache headers to be safely configured over time,
ensuring efficient and reliable caching.