DDR爱好者之家

Vue代码分割懒加载的实现方法
站长资源 2024/11/26 佚名
4 1538
DDR爱好者之家 Design By 杰米

什么是懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

为什么需要懒加载

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

如何与webpack配合实现组件懒加载

1、在webpack配置文件中的output路径配置chunkFilename属性

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev "htmlcode">



npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015








use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]





引言


而在webpack > 2的时代，vue做代码分割懒加载更加的easy，不需要loader，不需要require.ensure。




import解决一切。




分割层级




Vue代码分割懒加载包含如下几个层级:




      1、 组件层级分割懒加载




      2、 router路由层级




      3、 Vuex 模块




组件层级代码分割





//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})





路由层级代码分割







const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})





Vuex 模块代码分割,vuex中有动态注册模块方法，同时也是加上import





const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})





总结




在一般项目中，我们按照router和components层面分割（或者只使用router分割）就足够了。大型项目可能三者都会用到，但用法都很简单，不是么？


好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米