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了