VUE—项目优化之懒加载（vue异步组件优化、webpack分割js）

VUE—项目优化之懒加载（vue异步组件优化、webpack分割js）

什么是懒加载？
当页面进入某个模块的时候，对应加载当前模块的js即可，不需要一次性的把所有的js都进行加载。
默认情况下 webpack会把所有的css、js一次性整合在一起，页面初始化的时候全部加载好，
这样会造成性能的影响，我们通过配置实现一个懒加载， 初始化进入的时候只加载当前需要的js和css即可。

懒加载
把不同的路由对应的组件分割成不同的代码模块， 然后当路由被访问的时候才加载
对应的组件，需要分两步：
vue异步组件优化、webpack分割js

1、vue异步组件优化
组件需要被渲染的时候才会触发该函数，且会把结果缓存起来供未来重渲染（按需加载） 其实是调用promise方法 当成功后调用resolve， 失败后调用resject，
代码写法1：

import navbar from ‘@/components/Nav’
	components: {
		navbar : function (resolve, resject) {
			setTimeout(function () {
				resolve(navbar )
			}, 1000)
// 因为有延迟一秒的事件才会加载组件，所以一进入navbar这个路由是没有内容的
// 若不刷新，第一次进入会异步加载，第二次就不会，因为有缓存
// 有延迟看的清楚一些 真正开发是不需要写
		}	
	}

代码写法2：
// 不需要在本页import Navbar from ‘@/components/Navbar’
Navbar: function (resolve) {
setTimeout(() => {
resolve(require(’@/components/Navbar’))
}, 1000)
}

2、webpack代码分割
浏览器console.log查看Network 中的app.js app.js是当前所有的js合集

页面加载时会一次性全部加载进来，因此会影响性能，因此进行js的分割，进入哪个组件加载哪个组件的js就可以了
在index.js的import的地方进行修改
但工作中不会分割这么零碎是按功能分割
例如: 工作台和文档是同一个功能，访问两个组件公用了一个js文件，需要合并
写法：
后面要跟chunk（‘web’），vue在打包的时候，看见两个名字相同，会合并成一个模块
let Work = (resolve) => {
return require.ensure([], () => {
resolve(require(’@/views/backend/work’))
}, ‘web’)
}
原本的引入路由是这样的

修改成

然后在浏览器console.log查看Network

然后点击各种路由看变化

这样就是进入哪个路由就调用哪个js了