vue路由的懒加载
懒加载 --->延迟加载 ,在需要的时候进行加载,随用随载
像vue单页面应用,如果么有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会长时间出现白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效地分担首页所承担的加载压力,减少首页加载用时
- webpack代码分割
webpack 可以帮助我们将代码分成不同的逻辑块,在需要的时候加载这些代码。
使用 require.ensure() 来拆分代码
require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
第一个参数指定依赖的模块,
第二个参数是一个函数,
在这个函数里面你可以使用 require 来加载其他的模块,webpack 会收集 ensure 中的依赖,将其打包在一个单独的文件中,
在后续用到的时候使用 jsonp 异步地加载进去。
const User = resolve => {
require.ensure(['./components/user/User.vue'],()=>{
resolve(require('./components/user/User.vue'));
});
}
react路由的懒加载
- lazyload-loader
// webpack 配置文件中 使用lazyload-loader(必须将lazuyload-loader 放置在use的最右侧)
module: {
rules: [
{
test: /\.(js|jsx)$/,,
use: [
'babel-loader',
'lazyload-loader'
]
},
- 业务代码中
// 使用lazy! 前缀 代表需要懒加载的Router
import Shop from 'lazy!./src/view/Shop';
// Router 正常使用
<Route path="/shop" component={Shop} />