vue2.x 路由懒加载 优化打包体积
2018-01-22 09:51
176 查看
当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
import('./Foo.vue') // 返回 Promise
结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
const Foo = () => import('./Foo.vue')
实际开发中发现使用如下方式也可以
const Foo = (resolve) => { import('components/Foo.vue').then((module) => { resolve(module) }) }
在路由配置中什么都不需要改变,只需要像往常一样使用 [code]Foo:[/code]
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
相关文章推荐
- vue2 npm run build 打包出来的dist 文件夹资源引用加载错误
- [转] Webpack 打包优化之体积篇
- Webpack 打包之体积优化
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- Webpack 打包优化之体积篇
- 基于rollup的组件库打包体积优化小结
- webpack开发vue2项目中的一些坑(1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错)
- vue2路由view-router配置(懒加载)
- (转)[Unity3D]BuildPipeline.PushAssetDependencies 打包依赖包,优化UI Prefab的资源引用加载(坑爹之处)
- 配置的抽取,打包,加载和优化
- Webpack 打包优化之体积篇
- 随笔:vue2项目结构以及优化(着重是路由)
- Webpack打包后体积过大的优化思路
- vuejs项目打包之后的首屏加载优化及打包之后出现的问题
- RequireJs按需要加载angular模块和依赖,并且用r.js压缩打包js和css文件实现加载优化(图文)。
- 【Vue】项目打包的时候,build.js文件过大,可以通过设置懒加载或者按照路由分模块加载进行打包
- [Unity3D]BuildPipeline.PushAssetDependencies 打包依赖包,优化UI Prefab的资源引用加载
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- vue2路由异步加载(懒加载)的实现
- vue2笔记 ― vue-router路由懒加载的实现