La diferencia entre importar y requerir
La idea más importante en la programación de nodos es la modularidad, tanto la importación como la necesidad se utilizan por modularidad.
Siga la especificación
requerida es el método de introducción de la especificación AMD La
importación es un estándar de sintaxis de es6, si desea ser compatible con el navegador, debe convertirse a la sintaxis de es5.
El tiempo de llamada
requerido se llama en tiempo de ejecución, por lo que requiere teóricamente se puede usar en cualquier parte del código. La
importación se compila Se debe colocar al principio del archivo.
Esencialmente,
require es un proceso de asignación. De hecho, el resultado de require es un objeto, número, cadena, función, etc., y luego, asignar el resultado de require a una variable de
importación es un proceso de deconstrucción, pero todos los motores actuales La importación aún no se ha implementado. Usamos babel para admitir ES6 en el nodo, y solo transcodificamos ES6 a ES5 y luego lo ejecutamos. La sintaxis de importación transcodificarse para requerir.
Razones para usar la carga diferida:
Para aplicaciones de una sola página como vue (spy), si no se usa la carga diferida, los archivos empaquetados por el paquete web son demasiado grandes, lo que hace que se carguen demasiados recursos al ingresar a la página de inicio y el tiempo es demasiado largo. Incluso la carga no es propicio para la experiencia del usuario. El uso de la carga diferida puede dividir la página y cargar la página cuando sea necesario, lo que puede compartir eficazmente la presión de carga de la página de inicio y reducir el evento de carga de la página de inicio. En pocas palabras, lleva demasiado tiempo para ingresar a la página de inicio sin cargar demasiados recursos a la vez.
Método de carga diferida:
1. El método de importación propuesto por ES, (------ **** usado más comúnmente ------) El método es el siguiente: const HelloWorld = () => import ('La dirección del módulo a cargar ')
(Sin {}, significa regresar directamente)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = () => import("@/components/HelloWorld")
const HelloWorld = () => import('../components/HelloWorld') //推荐这种 简洁直观
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
2. El método de carga diferida de los componentes asíncronos de vue es el siguiente: componente: resolve => (require (['dirección de la ruta a cargar']), resolve)
import Vue from "vue";
import VueRouter form "vue-router";
Vue.use(VueRouter);
export default new Router({
mode:"history",
routes:[
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["../components/HelloWorld"],resolve))
},
{
path:'/Aboutus', //有children的不写name
meta: {
title: '关于我们'
},
children:[
{
path:'', //默认子路由 name写在默认子路由
name:'Aboutus',
component:resolve=>(require(["../components/Study"],resolve))
},
{
path:'/Study',
name:'Study',
component:resolve=>(require(["../components/Study"],resolve))
},
{
path:'/Work',
name:'Work',
component:resolve=>(require(["../components/Work"],resolve)),
meta:{
title:'work'
}
},
],
component:Aboutus
},
]
})
3. Utilice el require.ensure () exclusivo de webpack. Nota: require.ensure es una sintaxis especial de Webpack, que se utiliza para establecer el punto de división de código
例 ： componentes: r => require.ensure ([], () => r (require ('@ / components / Three')), 'group-home')
'group-home' es empaquetar componentes en bloques grupales. Se pueden colocar varios componentes en este grupo. Al empaquetar, Webpack empaquetará todos los módulos asincrónicos bajo el mismo trozo en un bloque asincrónico.
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
{
path: '/',
name: 'index',
component: Index
}
]
4. Divida los componentes en fragmentos
A veces queremos empaquetar todos los componentes bajo una determinada ruta en el mismo fragmento asincrónico. Solo es necesario usar fragmentos con nombre, una sintaxis de comentario especial para proporcionar el nombre del fragmento (requiere Webpack> 2.4).
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Webpack combinará cualquier módulo asincrónico con el mismo nombre de bloque en el mismo bloque asincrónico.