https://github.com/ditdot-dev/vue-code-splitting

Example of code splitting in Vue app with webpack and dynamic imports
https://github.com/ditdot-dev/vue-code-splitting

code-splitting dynamic-import example performance-optimization vue webpack

Last synced: 4 days ago
JSON representation

Example of code splitting in Vue app with webpack and dynamic imports

• Host: GitHub
• URL: https://github.com/ditdot-dev/vue-code-splitting
• Owner: ditdot-dev
• License: mit
• Created: 2020-12-18T15:43:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-09T08:35:29.000Z (over 3 years ago)
• Last Synced: 2023-03-06T23:08:57.875Z (over 1 year ago)
• Topics: code-splitting, dynamic-import, example, performance-optimization, vue, webpack
• Language: Vue
• Homepage: https://www.ditdot.hr/en/code-splitting-in-vue-js
• Size: 306 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Code Splitting in Vue 

> Code splitting example app that demonstrates creating multiple code bundles with dynamic import statements. 

Example of code splitting in Vue based on computed property and dynamic components. The initial load contains the initial view and critical assets, while other modules are loaded on the button press. 

## Features 

- when the data changes, the computed property will re-evaluate

- dynamic component switches between the imported components after the computed property change

- default Vue CLI prefetch function is disabled in vue.config.js - components are loaded on demand, as the user navigates the application

## Article

- [Code Splitting in Vue](https://www.ditdot.hr/en/code-splitting-in-vue-js)

## Clone

Clone this repo to your local machine 

```shell

$ git clone https://github.com/ditdot-dev/vue-code-splitting.git

```

## Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run serve

```

### Compiles and minifies for production

```

npm run build

```

### Lints and fixes files

```

npm run lint

```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## License

[MIT](https://github.com/ditdot-dev/vue-code-splitting-example/blob/main/LICENSE) license.