vue-router

vue-router 的三种加载方式速度对比

• 1. ensure 方式
• 2. amd 方式
• 3. 常规加载方式

---

ensure 方式

// const Index = r => require.ensure([], () => r(require('@/views/deposit/deposit_index')), 'Index')// const Product = r => require.ensure([], () => r(require('@/views/deposit/deposit_product')), 'Product')// const ProductSave = r => require.ensure([], () => r(require('@/views/deposit/deposit_product_save')), 'ProductSave')// const My = r => require.ensure([], () => r(require('@/views/deposit/deposit_my')), 'My')// const MyDetail = r => require.ensure([], () => r(require('@/views/deposit/deposit_my_detail')), 'MyDetail')// const MyTransDetail = r => require.ensure([], () => r(require('@/views/deposit/deposit_my_transdetail')), 'MyTransDetail')

如果是webpack2 可以使用

// const Index = () => System.import('@/views/deposit/deposit_index')

amd方式

const Index = resolve => require(['@/views/deposit/deposit_index'], resolve)const Product = resolve => require(['@/views/deposit/deposit_product'], resolve)const ProductSave = resolve => require(['@/views/deposit/deposit_product_save'], resolve)const My = resolve => require(['@/views/deposit/deposit_my'], resolve)const MyDetail = resolve => require(['@/views/deposit/deposit_my_detail'], resolve)const MyTransDetail = resolve => require(['@/views/deposit/deposit_my_transdetail'], resolve)

如果是webpack2 可以使用

// const Index = () => System.import('@/views/deposit/deposit_index')

常规加载方式

import Index from '@/views/deposit/deposit_index'import Product from '@/views/deposit/deposit_product'import ProductSave from '@/views/deposit/deposit_product_save'import My from '@/views/deposit/deposit_my'import MyDetail from '@/views/deposit/deposit_my_detail'import MyTransDetail from '@/views/deposit/deposit_my_transdetail'

如果是webpack2 可以使用

// const Index = () => System.import('@/views/deposit/deposit_index')

总结：
加载方式 首屏平均时间 跳转页面平均时间
常规加载 100.62ms 27.59ms
amd加载 386.5ms 48.55ms
ensure加载 348.7ms 125.76ms

amd 与 ensure 区别

• require-amd

说明: 同AMD规范的require函数，使用时传递一个模块数组和回调函数，模块都被下载下来且都被执行后才执行回调函数

语法: require(dependencies: String[], [callback: function(…)])
参数
dependencies: 模块依赖数组
callback: 回调函数

• require-ensure

说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用

注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。