vue-router和webpack懒加载，页面性能优化篇

在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},

在实践过程中应该会遇到各种问题，到时候再继续补充，前端新手，多多指教！

来源：https://segmentfault.com/a/1190000017766798

vue-router和webpack懒加载，页面性能优化篇

原文地址：https://www.cnblogs.com/datiangou/p/10224826.html