Using Vue CLI to Build Modular Sitefinity Widgets
For years, the Kubota Digital website platform developed by TracTru has used the Vue JavaScript Framework library to deliver light-weight, front-end components. By using Vue, front-end components can be built for re-use, reducing code duplication and speeding up development. These components are bundled into a single, large JavaScript file that is downloaded by the browser when the website first loads. While this is convenient for the developer, as the project grows, the bundle file will grow larger and larger in size, making the website operate more slowly, especially for users on poor network connections. Fortunately, the latest version of Vue, in combination with Vue CLI, attacks the problem of large bundle sizes from two angles: improved “tree shaking” and the ability to create multiple, smaller bundles so that the user doesn’t have to download more than they need.
Shake the tree…
Most projects that make use of front-end libraries like Vue will end up employing a JavaScript build process. The build process has one simple goal: take the code that is written by developers (the source code) and reconstruct it in a way that is optimized for the web browser. Build processes will typically combine files together, rework code to be compatible with older browsers, strip out unnecessary characters and even rename variables and functions to be as short as possible. Vue CLI employs another common shake, called tree-shaking, where code that is unused is removed from the bundle. This allows developers to use a small part of a library without increasing the size of their JavaScript bundle by too much.
A clearer Vue…
Even with a modern build process, combining all of your components into a single file can still cause a noticeable delay for some users. Fortunately, the new Vue CLI allows you to separate your bundles into “pages.” Using this feature, you’re able to pick and choose which components will be served in which bundle and any components that are used in more than one bundle are automatically placed in a “shared” bundle. For the Kubota Digital platform, we are separating our bundles based on which components are needed for a single Sitefinity widget. When the user visits a page, only the bundles for the specific widgets on the page will be loaded, increasing the speed at which each widget loads on the page.
What does this mean for your dealership?
Faster loading speeds and faster information for your customers. Our clients’ days of losing a lead to a slow page are over. Ready to experience the TracTru difference? It’s time to let TracTru optimize your Kubota dealership’s website with our in-house, Modular Sitefinity Widgets utilizing Vue CLI! You can give us a call at (501) 553-9500 or fill out our contact form and a member of the TracTru Crew will get in touch with you!