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
Large Vue apps usually use Vue Router with multiple routes. Individual routes might also use various node modules. With Vue Router and webpack’s support for dynamic imports, routes can be automatically split into separate JavaScript and CSS bundles and it’s easy to do, for example in your router.js.
{ name: 'profile', path: '/profile/:user', component: () => import('./views/Profile.vue')} |
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 package.json’s scripts-section:
"build:report": "vue-cli-service build --report" |
Running 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 <head> with <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 vue.config.js:
module.exports = { chainWebpack: config => { config.plugins.delete('prefetch') }} |
And manually choose the prefetchable bundles with webpack’s inline comments:
import(/* webpackPrefetch: true */ './views/Profile.vue') |
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:
<style lang="scss" scoped>@import '@/styles/variables.scss';</style> |
You can add this in vue.config.js:
module.exports = { css: { loaderOptions: { sass: { data: `@import 'src/styles/variables.scss;'` } } }} |
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:
"test:coverage": "vue-cli-service test:unit --coverage" |
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 .gitignore.
Using 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:
collectCoverageFrom: ['src/**/*.{js,vue}'] |
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 browserslist config to specify the browsers you are targeting. That configuration is used together with Babel and Autoprefixer to automatically provide the needed JavaScript features and CSS vendor prefixes.
With a single extra --modern argument, you can build two versions of your app; one for modern browsers with modern JavaScript and unprefixed code, and one for older browsers. The best part is, no extra deployment is needed. Behind the scenes, Vue CLI builds your app utilizing new attributes of the <script> tag. Modern browsers will download files defined with <script type="module"> and older browsers will fallback to JavaScript defined with <script nomodule>.
The final addition to your package.json:
"build:modern": "vue-cli-service build --modern" |
Providing modern browsers with modern code will most likely improve your app’s performance and size.
