Tuomo is a software designer primarily specializing in the user-facing side of web development and design, crafting visually appealing, modern, simple and clean UI’s and websites, whilst always keeping the focus on user experience.
What Is Vue CLI?
Vue CLI (version 3) is a system for rapid Vue.js development. It’s a smooth way to scaffold a Vue project structure and allows a zero-config quick start to coding and building. Vue CLI Service, that is the heart of every Vue CLI app, neatly abstracts away common front-end development tools such as Babel, webpack, Jest and ESLint, while still offering flexible ways for configurability and extensibility as your project grows.
Let’s go through a few tips that’ll help you get even more out of your Vue CLI App.
1. Code Splitting And Keeping Bundles Light
Code splitted routes are loaded only on-demand, so it can have a major benefit on the initial loading time of your app.
Vue CLI also comes with Webpack Bundle Analyzer. It offers a nice birds-eye view of the built app. You can visualize bundles, see their sizes and also the size of modules, components or libraries they consist of. This will come in handy when Vue CLI warns you about bundle sizes getting out of hand, giving you some hints where to trim down the fat.
Vue CLI Service provides an extra
--report argument for the
build command to generate the build report. Add this handy little snippet in your
npm run build:report you’ll get report.html generated in your dist folder, which you can then open in your browser.
2. Fine-Tuning the Prefetching
Not only does Vue CLI handle code splitting, it also automatically injects these bundles as resource hints to your HTML’s
<link rel="prefetch" src="bundle.js">. This enables browsers to download the files while the browser is idling, making navigating to different routes snappier.
While this may be a good thing, in larger apps there might be many routes that aren’t meant for the average user. Prefetching these routes will consume unnecessary bandwidth. You can disable the prefetch plugin in
And manually choose the prefetchable bundles with webpack’s inline comments:
3. Use Sass Variables Everywhere
Vue’s scoped styles, Sass and BEM are helpful tools for keeping your CSS nice and tidy. You probably would still like to use some global Sass variables and mixins inside your components, preferably without importing them separately every time.
Instead of writing something like this in every component:
You can add this in
4. Test Coverage with Jest
Vue CLI comes (optionally) with Jest all configured and with Vue Test Utils writing unit tests for your components is a breeze. The CLI Service supports all Jest’s command line options as well. The nice thing about Jest is its built-in test coverage report generator.
To generate a report, again for convenience, you can add another script to your package.json:
Now run it with
npm run test:coverage. Not only does it show a report in your terminal, but an HTML-report will also be created in the coverage-folder of your project. You might want to add this to your
collectCoverageFrom in your Jest’s config, you can make the coverage also include files that don’t have tests yet, helping you identify and increase the coverage where it’s needed:
5. Modern Build for Modern Browsers
Most of us probably still need to take care of users with older browsers. Luckily Vue CLI supports a
With a single extra
<script> tag. Modern browsers will download files defined with
The final addition to your package.json:
Providing modern browsers with modern code will most likely improve your app’s performance and size.