feat: bundle into moduleJS and split chunk (#34)

* build by es modules

* lazy load page

* import order

* fix

* fix

---------

Co-authored-by: Atipat Pankong <atipat.p@lmwn.com>

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pre-commit || npm run pre-commit
+yarn lint-staged || npm run lint-staged

eslint.config.js

@@ -1,20 +1,27 @@
-const globals = require('globals')
-const js = require('@eslint/js')
+import globals from 'globals'
+import path from 'node:path'
 
-const { FlatCompat } = require('@eslint/eslintrc')
+import { fileURLToPath } from 'node:url'
 
-const { includeIgnoreFile } = require('@eslint/compat')
-const pluginVue = require('eslint-plugin-vue')
+import js from '@eslint/js'
+
+import { FlatCompat } from '@eslint/eslintrc'
+import { includeIgnoreFile } from '@eslint/compat'
+
+import pluginVue from 'eslint-plugin-vue'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
-const path = require('node:path')
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
   allConfig: js.configs.all,
 })
+
 const gitignorePath = path.resolve(__dirname, '.gitignore')
 
-module.exports = [
+export default [
   includeIgnoreFile(gitignorePath),
   ...compat.extends('eslint:recommended', 'prettier'),
   ...pluginVue.configs['flat/recommended'],

package.json

@@ -2,14 +2,13 @@
   "name": "ku-table",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--openssl-legacy-provider vite",
     "build": "NODE_OPTIONS=--openssl-legacy-provider vite build",
     "serve": "NODE_OPTIONS=--openssl-legacy-provider vite preview",
     "lint": "eslint --fix src",
-    "format": "prettier .  --write",
-    "prepare": "husky install",
-    "pre-commit": "lint-staged"
+    "prepare": "husky install"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

src/router/index.js

@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Schedule from '@/pages/Schedule.vue'
-import NotFound from '@/pages/NotFound.vue'
-import Unit from '@/components/Unit.vue'
-import Login from '@/pages/Login.vue'
+
+const Schedule = () => import('@/pages/Schedule.vue')
+const NotFound = () => import('@/pages/NotFound.vue')
+const Unit = () => import('@/components/Unit.vue')
+const Login = () => import('@/pages/Login.vue')
 
 const routes = [
   {

tailwind.config.js

@@ -12,7 +12,7 @@ const gridConfig = () => {
 }
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ['./public/**/*.html', './src/**/*.vue'],
   safelist: [
     {