The difference between import and require
The most important idea in node programming is modularity. Both import and require are used by modularity.
Follow the specification
require is the introduction method of AMD specification
import is a syntax standard of es6, if you want to be compatible with the browser, it must be converted to the syntax of es5.
Call time
require is called at runtime, so require theoretically can be used anywhere in the code.
Import is compiled It must be placed at the beginning of the file.
Essentially
require is an assignment process. In fact, the result of require is an object, number, string, function, etc., and then assigning the result of require to a variable
import is a deconstruction process, but all current engines Import has not been implemented yet. We use babel to support ES6 in node, and we only transcode ES6 to ES5 and then execute it. Import syntax will be transcoded to require.
Reasons for using lazy loading:
For single-page applications like vue (spy), if lazy loading is not used, the files packaged by webpack are too large, causing too many resources to be loaded when entering the homepage, and the time is too long. Even loading is not conducive to user experience. The use of lazy loading can divide the page, and load the page when needed, which can effectively share the loading pressure of the home page and reduce the loading event of the home page. Simply put, it takes too long to enter the home page without loading too many resources at once.
Lazy loading method:
1. The import method proposed by ES, (------****most commonly used------) The method is as follows: const HelloWorld = ()=>import('The address of the module to be loaded')
(Without {}, it means return directly)
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. The lazy loading method of vue asynchronous components is as follows: component: resolve=>(require(['address of the route to be loaded']), 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. Use webpack's unique require.ensure(). Note: require.ensure is a special syntax of Webpack, used to set code-split point
例：components: r => require.ensure([], () => r(require(’@/components/Three’)), ‘group-home’)
'group-home' is to pack components in group blocks. Multiple components can be put into this group. When packing, Webpack will pack all asynchronous modules under the same chunk into one asynchronous block.
const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
{
path: '/',
name: 'index',
component: Index
}
]
4. Divide components into chunks
Sometimes we want to pack all components under a certain route in the same asynchronous chunk. Only need to use named chunks, a special comment syntax to provide chunk name (requires 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 will combine any asynchronous module with the same block name into the same asynchronous block.