route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术
- vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
但是,这种情况下一个组件生成一个js文件。
举例如下:
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}
2. es提案的import()
- 推荐使用这种方式(需要webpack > 2.4)
- webpack官方文档:webpack中使用import()
vue官方文档:路由懒加载(使用import())
- vue-router配置路由,代码如下:
const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
const main = () => import(/* webpackChunkName: "index" */ '@views/main')
const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')
3. webpack提供的require.ensure()
在webpack 2的官网上写了这么一句话:
require.ensure() is specific to webpack and superseded by import().
所以,在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效,所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法:
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三个参数:
第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖;
第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解,就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。
- vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
举例如下:
const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')
https://blog.csdn.net/jacktesla/article/details/80796775 vue项目实现按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
https://blog.csdn.net/sma2mmm/article/details/83827813 require.ensure()和import() 使用区分
route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()的更多相关文章
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- vue 动态路由按需加载的三种方式
在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: ' ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
- vue--按需加载的3种方式(解决网页首次加载速度慢的问题)
一.vue的异步组件加载 使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中: {path: '/index', name: 'index', meta:{ title:'首页', r ...
- React-Router4 按需加载的4种实现
其实几种实现都是近似的,但具体上不太一样,其中有些不需要用到bundle-loader 第一种:ReactTraining/react-router 介绍的基于 webpack, babel-plug ...
- HBase协处理器加载的三种方式
本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...
随机推荐
- YII2 实现dropDownList 联动事件
一.视图中 <div class="main-form"> <?php $form = ActiveForm::begin(); ?> <?= $fo ...
- JAVA处理数字与中文数字互转(最大处理数字不超过万兆即:9999999999999999.9999)
package practice; import java.util.Arrays; /** * 数字与中文数字互转(最大处理数字不超过万兆即:9999999999999999.9999) * @au ...
- C 全局变量 本地变量
- Disable trigger to avoid the ID is auto-updated
CREATE TABLE COBRA.COBRA_PRODUCT_INFO_BAK AS SELECT * FROM COBRA.COBRA_PRODUCT_INFO; TRUNCATE TABLE ...
- js 获取扫码枪信息
---- js 获取扫码枪不需要记录 lastCode 啊,只需要在时间超出范围的时候重置 lastTime 和 code 就行了.如果 码枪会输入回车,那就在 keyCode === 13 的时候使 ...
- Nginx入门(一)——安装和配置
1.下载地址 http://nginx.org/en/download.html 2.启动Nginx 进入window的cmd窗口,输入如下图所示的命令,进入到nginx目录(F:/nginx-1.8 ...
- Vuex的mapGetters方法使用报错
报错信息: ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script ...
- Oracle 多表联合删除?--转
oracle和mysql多表删除数据的方法一大把,好多都是没经过证实的,你很可能已经被错误信息误导了,下面我以mysql两张表删除数据为例,来让给为注意到这一点,我在mysql中新建了两张表,分别是用 ...
- 最后执行finally
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 内联样式style三元表达式(动态绑定样式)
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</sp ...