共计 2162 个字符,预计需要花费 6 分钟才能阅读完成。
在 vue 单页应用中,当项目不断完善丰富时,即使使用 webpack 打包,文件依然是非常大的,影响页面的加载。如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加载),这样就更加高效了。——引自 vue-router 官方文档
如何实现??
vue 异步组件
vue-router 配置路由,使用 vue 的异步组件技术,可以实现懒加载,代码如下:// 每个组件都会生成一个 js 文件
import Vue from ‘vue’
import Router from ‘vue-router’
import Login from ‘../view/List.vue’;
Vue.use(Router);
export default new Router({
routes:[
{
path: ‘/home/list’,
name: ‘list’,
components: resolve => require([‘../view/List.vue’], resolve)
}
],
动态 import(webpack > 2.4)
vue、webpack 官方推荐
情况一:每个组件都会打包生成一个 js 文件
const List = () => import(‘../view/List.vue’)
// 在路由配置中什么都不需要改变,像往常一样使用组件:
export default new Router({
routes:[
{
path: ‘/home/list’,
name: ‘login’,
components: Login
},
{
path: ‘/home/user’,
name: ‘user’,
components: User
}
],
情况二:所有组件合并打包在一个异步块 chunk 中
const List = () => import(/* webpackChunkName: “home” */ ‘./List.vue’)
const User = () => import(/* webpackChunkName: “home” */ ‘./User.vue’)
// 在路由配置中什么都不需要改变,像往常一样使用组件:
export default new Router({
routes:[
{
path: ‘/home/list’,
name: ‘list’,
components: List
},
{
path: ‘/home/user’,
name: ‘user’,
components: User
}
],
// 在 webpack.base.config.js 中配置 ChunkFileName:
output: {
path: config.build.assetsRoot,
filename: ‘[name].js’,
chunkFilename: ‘[name].js’,
publicPath: process.env.NODE_ENV === ‘production’
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
另一种写法,更简洁:同样需要在 webpack.base.config.js 中配置 ChunkFileName:
{
path: ‘/home/list’,
name: ‘list’,
component: () => import(/* webpackChunkName:”list”*/ ‘../view/List.vue’)
},
{
path: ‘/home/user’,
name: ‘user’,
component: () => import(/* webpackChunkName:”user”*/ ‘../view/User.vue’)
},
webpack 提供的 require.ensure()
语法如下:摘自官网
require.ensure(dependencies: String[], callback: function(require), chunkName: String
多个路由指定相同的 chunkName,在这里 chunkName 为 home,会合并打包成一个 js 文件。
{
path: ‘/home/list’,
name: ‘list’,
// component:list
component: r => require.ensure([], () => r(require(‘../view/Lst.vue’)), ‘home’)
},
{
path: ‘/home/user’,
name: ‘user’,
// component:user
component: r => require.ensure([], () => r(require(‘../view/User.vue’)), ‘home’)
}
// 在 webpack.base.config.js 中配置 ChunkFileName 和 publicPath:
output: {
path: config.build.assetsRoot,
filename: ‘[name].js’,
chunkFilename: ‘[name].js’,
publicPath: ‘./’,
publicPath: process.env.NODE_ENV === ‘production’
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
在实践过程中应该会遇到各种问题,到时候再继续补充,前端新手,多多指教!