vue 如何处理两个组件异步问题_vue异步组件 懒加载& webpack按需加载——性能优化...

利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载(按需加载)。

为什么需要懒加载?

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。

这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。

因此，vue为我们专门设立了异步组件，通过异步组件，我们可以得到两点好处：

1、 用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

2、 缓存组件，通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

异步组件=原理同webpack的按需加载

好处：

1)按需加载，可以节省首次加载时间，提高速度，性能优化

2)第一次加载完成会缓存

异步组件的描述：

Vue允许将组件定义为一个异步解析(加载)组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

！！！ps:要使用异步组件，一个比较推荐的方式就是配合webpack代码分离功能。

例子：(全局|局部)

法一：结合webpack

//1)全局：

Vue.component('component-name',function(resolve){

//require 语法告诉 webpack自动将编译后的代码分割成不同的块

//这些块将通过 Ajax 请求自动下载

require(['./my-async-componnet'],resolve)

})

//注册全局组件名，但只有一个名字，没有实体，相当于空的

//当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法

//然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。

//2)局部

new Vue({

components: {

'component-name':function(resolve) {

require(['./my-component'], resolve)

}

}

})

法二：通过webpack2+es2015返回一个promise

//1)全局：

Vue.component('component-name',

()=> import('./my-async-componnet')

)

//2) 局部：

new Vue({

components: {

'component-name': () => import('./my-async-componnet')

}

})

高级异步组件(即处理加载状态)

工厂对象可以返回一个对象，对象里面的一些配置参数

const asyncComponent = () => ({

// 需要加载的组件 (应该是一个 `Promise` 对象)

component: import('./my-async-componnet'),

//异步加载时使用的组件(加载中的效果)

loading: loadingComponent,

//加载失败时使用的组件

error: ErrorComponent,

//展示加载中组件的延时时间，默认200毫秒

delay: 200,

//超时时间，超过该时间显示加载失败的组件

timeout: 3000

})

单文件组件+vue-router案例:

2个组件：first、second代表2个页面, 路由文件异步组件方式：

//传统写法：import First from '@/components/First'

方法一：

const first = () => import("../components/first.vue")

const second = () => import("../components/second.vue")

方法二：

const first = resolve => require.ensure([], () => resolve( require(../components/first.vue)), 'chunkname1')

const second = resolve => require.ensure([], () => resolve( require(../components/second.vue)), 'chunkname2')

//其余配置如以往一样

const routes = [

{

path: '/',

component: first

},

{

path: '/',

component: second

}

]

webpack中利用require.ensure()实现按需加载

require.ensure()(webpack异步加载|代码分割)

解释1:把js模块独立导出一个个js文件，然后使用这个模块时，webpack会构造这个script dom元素，加入到document.head中，由浏览器自动发起异步请求这个js文件，再写个回调，去定义得到这个js文件后的业务逻辑。

解释2:webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

require.ensure这个函数是一个代码分离的分割线，表示 回调里面的require

是我们想要进行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一个webpack打包的单独js文件。当然ensure里面也是可以写一些同步的require的，如：

var sync = require('syncdemo.js') //下面ensure里面也用到

btn.click(function() {

require.ensure([], function() {

var map = require('./map.js') //map.js放在我们当前目录下

//这个不会独立出去，因为它已经加载到模块缓存中了

var sync = require('syncdemo.js')

})

})

===》ensure会把没有使用过的require资源进行独立分成成一个js文件

ensure语法及参数解释

require.ensure(dependencies: string[], callback: function(require),chunkName:string)

第一个参数：默认[],放置当前这个模块所依赖的其他模块。比如：假设A 和 B都是异步的，B中需要A，则B下载之前，先要下载A ：require.ensure([‘A.js’], function...),!!!!需要注意：webpack会把参数里面的依赖异步模块和当前的需要分离出去的异步模块给一起打包成同一个js文件，这里可能会出现一个重复打包的问题， 假设A 和 B都是异步的， ensure A 中依赖B，ensure B中 依赖A，那么会生成两个文件，都包含A和B模块。

第二个参数：当所有依赖都加载完成后，webpack会执行这个回调函数。require对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步require()依赖和其他模块提供下一步的执行。

第三个参数，chunkname打包后代码块的名字：chunk提供给这个特定的require.ensure()的chunk的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体。如果想要让build之后的代码更便于识别，可配置webpack代码，单独打包自己定义的名字(需要配置chunkFileName和publicPath)

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname, './dist'),

publicPath: '/dist/', //是按需加载单独打包出来的chunk是以publicPath为基准来存放的

filename: 'build.js',

chunkFilename: 'js/[name]-[chunkhash:8].js' //最终生成的路径和名字

}

}

打包结果.png

目录结果.png

参考地址：