Vue+webpack实现懒加载过程解析
2020-03-11 17:52
351 查看
这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
实现方式:
1、webpack method
require.ensure([''], callback, chunkName) ;
2、es6 motehod
import()
import().then()
import(/* webpackChunkName: async-chunk-name */ /* webpackMode: lazy */ modulename)
需要安装bable插件 syntax-dynamic-import,因为import只能出现在页面顶部
具体实现:
第一种、
var component = (resolve) => { import(/* webpackChunkName:'vendor'*/'组件路径').then(module => { resolve(module) }) }
第二种、
var component = (resolve) => { require(['组件路径'], resolve) }
第三种、
var component = (resolve) => { require.ensure([], () =>{ resolve(reauire('组件路径')); }, chunkName) }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- vue+webpack 更换主题N种方案优劣分析
- 浅析webpack-bundle-analyzer在vue-cli3中的使用
- 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
- vue-cli基础配置及webpack配置修改的完整步骤
- 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
- 详解webpack打包vue项目之后生成的dist文件该怎么启动运行
- webpack + vue 打包生成公共配置文件(域名) 方便动态修改
- 基于 vue-skeleton-webpack-plugin 的骨架屏实战
- 简述vue-cli中chainWebpack的使用方法
相关文章推荐
- vue+webpack实现异步组件加载的方法
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- vue+webpack 实现懒加载的三种方式
- Vue.js中用webpack合并打包多个组件并实现按需加载
- vue+webpack实现异步组件加载
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- vue+webpack实现异步加载三种用法示例详解
- Vue结合webpack实现路由懒加载和分类打包
- VUE+Webpack 实现懒加载的三种方式
- 关于webpack 启动资源服务器实现热加载 和es6 babel代码转化
- 利用webpack和vue实现组件化
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- 使用webpack实现jquery按需加载
- VUE+WebPack实现精美Html5游戏设计:cardBattle的启动场景设计
- vue-cli-webpack模板配置全解析-2
- webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)
- vue+webpack构建项目过程