在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
2017-08-07 17:18
921 查看
当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码。
我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割:
组件,也称为异步组件
路由
Vuex 模块
但是他们都有一些共同之处:自webpack2.0版本之后,他们都使用动态导入[译者注:也可以参考这个]。
这就像在注册组件时使用
并在本地注册使用:
通过包装
如果组件导入使用命名导出[译者注:模块的导入导出,可以参考阮老师的文章],则可以在返回的Promise上使用对象解构。
例如,对于来自KeenUI的UiAlert组件:
ps: 这篇文章,基本上是翻译过来的。感谢作者Alex Jover
原文链接:
Lazy Loading in Vue using Webpack's Code Splitting
其他文章:
weiqinl
简书
我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割:
组件,也称为异步组件
路由
Vuex 模块
但是他们都有一些共同之处:自webpack2.0版本之后,他们都使用动态导入[译者注:也可以参考这个]。
Vue组件中的懒加载
这在Egghead上的"使用Vue异步组件按需加载组件"视频中有很好的解释。这就像在注册组件时使用
import函数一样简单:
Vue.component('AsyncCmp', () => import('./AsyncCmp')
并在本地注册使用:
new Vue({ // ... components: { 'AsyncCmp': () => import('./AsyncCmp') } })
通过包装
import函数进入到箭头函数,Vue将会在它被请求的时候执行加载这个模块。
如果组件导入使用命名导出[译者注:模块的导入导出,可以参考阮老师的文章],则可以在返回的Promise上使用对象解构。
例如,对于来自KeenUI的UiAlert组件:
... components: { UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert) } ...
Vue路由中的懒加载
Vue路由器内置支持懒加载。这就像用import函数导入组件一样简单。看个例子,我们想在 /login 路由中使用懒加载一个Login组件:
// Instead of: import Login from './login' // 替换: import Login from './login' const Login = () => import('./login') new VueRouter({ routes: [ { path: '/login', component: Login } ] })
懒加载Vuex模块
Vuex有一种registerModule方法可以让我们动态地创建Vuex模块。如果我们考虑到该
import功能将ES模块作为有效载荷返回promise[原文: If we take into account that import function returns a promise with the ES Module as the payload],我们可以使用它来懒加载模块:
const store = new Vuex.Store() ... // Assume there is a "login" module we wanna load // 设想 我们需要加载一个"login"模块 import('./store/login').then(loginModule => { store.registerModule('login', loginModule) })
结论
Vue和Webpack使用懒加载非常简单。使用您刚刚阅读的内容,您可以从不同方面开始分割应用程序,并在需要时加载应用程序,从而减轻应用程序的初始加载。ps: 这篇文章,基本上是翻译过来的。感谢作者Alex Jover
原文链接:
Lazy Loading in Vue using Webpack's Code Splitting
其他文章:
weiqinl
简书
相关文章推荐
- 在webpack中使用code splitting 实现按需加载
- React配合Webpack实现代码分割与异步加载
- webpack学习笔记之代码分割和按需加载的实例详解
- 关于webpack 启动资源服务器实现热加载 和es6 babel代码转化
- vue项目优化之按需加载组件-使用webpack require.ensure
- vue+webpack实现异步组件加载
- vue项目优化之按需加载组件-使用webpack require.ensure
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- vue+webpack实现异步组件加载的方法
- 使用webpack实现jquery按需加载
- Vue代码分割懒加载的实现方法
- VUE+Webpack 实现懒加载的三种方式
- 【108】Vue-router 2.8.1 懒加载使用Webpack 3 的import() 语句出错的解决办法
- vue项目优化之按需加载组件-使用webpack require.ensure
- webpack学习笔记(代码分割,按需加载)
- vue项目优化之按需加载组件-使用webpack require.ensure
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- 详解vue项目优化之按需加载组件-使用webpack require.ensure
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信