在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懒加载,页面性能优化篇的更多相关文章

  1. js动态加载js文件(js异步加载之性能优化篇)

    1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...

  2. Android ViewPager Fragment使用懒加载提升性能

     Android ViewPager Fragment使用懒加载提升性能 Fragment在如今的Android开发中越来越普遍,但是当ViewPager结合Fragment时候,由于Androi ...

  3. 一步一步实现listview加载的性能优化

    listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...

  4. vue webpack 懒加载

    自己项目中的写法 const router = new Router({ routes: [ { path: '/index', component: (resolve) => { requir ...

  5. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  6. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  7. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...

  8. vue + vue-lazyload 实现图片懒加载

    1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...

  9. vue实现menu菜单懒加载

    本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...

随机推荐

  1. ValueError: Cannot assign "\<QuerySet [<Area: China>]\>": "Area.parent" must be a "Area" instance.

    在研究才Django自关联的过程中,在插入数据时爆出如下错误: ValueError: Cannot assign "<QuerySet [<Area: China>]&g ...

  2. MemoScope.Net

    What is MemoScope.Net ? It's a tool to analyze .Net process memory: it can dump an application's mem ...

  3. Python中列表的使用

    python中的列表与java中的数组非常类似,但使用方法比java中数组简单很多,python中的数据类型不需要显示声明,但在使用时必须赋值,列表元素下标从0开始 初始化列表(初始化一个包含五个元素 ...

  4. LC 789. Escape The Ghosts

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...

  5. Centos7 Devstack [Rocky] 重启后无法联网

    部署devstack-rocky版本后网络,可以 Ping 通自己的 IP,但 Ping 不同网关,ping不通同网段主机,查看网卡和ovs信息如下 解决 第一步 按造网上教程,修改br-ex,ens ...

  6. OpenStack 虚拟机启动流程 UML 分析(内含 UML 源码)

    目录 文章目录 目录 前言 API 请求 Nova API 阶段 Nova Conductor 阶段 Nova Scheduler 阶段 Nova Compute 阶段(计算节点资源分配部分) Nov ...

  7. 六十三:CSRF攻击与防御之系统准备之登录与转账功能

    登录功能 在forms里面添加验证 class LoginForm(Form): email = StringField(validators=[Email(message='邮箱格式错误')]) p ...

  8. c++ STL之unordered_set

    unordered_set的特点: 自身值就是主键,所以值唯一并且不可修改 基于hash表的无序排列 unordered_set基于哈希表,是无序的. 在一个 unordered_set 容器中,元素 ...

  9. Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU)

    Spark3.0 preview预览版可以下载使用,地址:https://archive.apache.org/dist/spark/spark-3.0.0-preview/,pom.xml也可以进行 ...

  10. MySQL 5.7 中文全文检索

    MySQL 5.7 中文全文检索 在 MySQL 5.7.6 之前,全文索引只支持英文全文索引,不支持中文全文索引,需要利用分词器把中文段落预处理拆分成单词,然后存入数据库.从 MySQL 5.7.6 ...