A SQL editor view where users can query easily on a table using SQL, and see the results.
For a demo click here
- Used webpack bundle analyzer to anlyze the build.
- According to analyzer element-plus package contributed most to the size of vendor file (400 KiB).
- Then moved the global imports of element-plus components that were only used once to there respesting components.
- This reduced the size of vendor file to 316 KiB.
- Then applied lazy loading to Navbar component, which slit the vendor file and new size of vendor file become 244 KiB.
- This whole process doesn't changed the overall size of build, it improved the performance by only loading the chunk when required.
.
├── db ⇒ act as database for project
├── media
├── public
│ ├── _redirects ⇒ redirect config for netlify
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ │ ├── Icon.vue
│ │ ├── Navbar.vue
│ │ ├── QueryResult.vue
│ │ ├── SaveIcon.vue
│ │ ├── SideNav.vue
│ │ ├── SQLIcon.vue
│ │ ├── Tabbar.vue
│ │ └── TableIcon.vue
│ ├── plugins
│ │ └── element.js
│ ├── router
│ │ └── index.js
│ ├── utils
│ │ ├── auth.js
│ │ └── index.js
│ ├── views
│ │ ├── Dashboard.vue
│ │ ├── Editor.vue
│ │ ├── Home.vue
│ │ ├── Login.vue
│ │ └── NotFound.vue
│ ├── App.vue
│ ├── fakexios.js ⇒ to simulate api calls
│ └── main.js
├── .browserlistrc
├── .gitignore
├── babel.config.js
├── jsconfig.json
├── LICENSE
├── package.json
├── README.md
└── yarn.lock
yarn install
yarn serve
yarn build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent