Dark Horse] Gestión de fondo - Enrutamiento Lazy Loading

Al agrupar un proyecto de compilación, los paquetes de JavaScript pueden volverse muy grandes y afectar la carga de la página. Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código y luego cargar los componentes correspondientes cuando se accede a la ruta, será más eficiente.

En concreto, se requieren 3 pasos:

① Instale el paquete @babel/plugin-syntax-dynamic-import.

② Declare el complemento en el archivo de configuración babel.config.js.

③ Cambie la ruta a la forma de carga bajo demanda, el código de ejemplo es el siguiente:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

Para obtener documentación detallada sobre la carga diferida de rutas, consulte los siguientes enlaces:

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

Los nombres de grupo de foo y bar se llaman group-foo

Estos dos archivos se empaquetarán en el mismo archivo js al mismo tiempo. Cuando se solicite foo, se solicitará bar al mismo tiempo.

Después de instalar las dependencias, vuelva a colocar todas las rutas anteriores en un formulario de carga diferida

const+ el nombre del componente, y luego el nombre del grupo y la ruta de almacenamiento del componente,

¿Cuáles desea poner en un archivo js y usar el mismo nombre de grupo?

El nombre del grupo generalmente se denomina como la colección de nombres del componente.

// import Login from '../components/login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/login.vue')
// import Home from '../components/home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/home.vue')
// import Welcome from '../components/welcome.vue'
const WelCome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/welcome.vue')

// import Users from '../components/user/Users.vue'
const  Users  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Rights.vue'
const   Rights  = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')


// import Cate from '../components/goods/Cate.vue'
const  Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
// import Add from '../components/goods/add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/add.vue')

// import Order from '../components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')