在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. Android_(控件)使用ListView显示Android系统SD卡的文件列表_02

    使用ListView显示Android SD卡中的文件列表 父类布局activity_main.xml,子类布局item_filelayout(一个文件的单独存放) 运行截图: 程序结构 <?x ...

  2. 初学 Nginx (一) SSI 的作用

    SSI:Server Side Include,是一种基于服务端的网页制作技术, Nginx ssi 的例子如下: It took a little while to figure this out ...

  3. [CSP-S模拟测试]:那一天我们许下约定(DP+组合数学)

    题目传送门(内部题2) 输入格式 每个测试点有多组测试数据.对于每组数据,有一行共三个整数$N$,$D$,$M$含义如题.输入结束标识为$“0 0 0”$ (不含引号). 输出格式 对于每组数据,输出 ...

  4. 识别C++编译器编译标准

    cout << __cplusplus<<endl; C++03:__cplusplus = 199711L C++11:__cplusplus = 201103L

  5. springboot+dubbo+zookeeper+mybatis

    参考地址:https://www.cnblogs.com/gaopengfirst/p/9555240.html 首先创建一个maven项目: 再在该父项目中创建3个module,分别是:provid ...

  6. 代码审计之seacms v6.54 前台Getshell 复现分析

    1.环境: php5.5.38+apache+seacms v6.54 上一篇文章针对seacms v6.45 进行了分析,官方给出针对修复前台geishell提供的方法为增加: $order = ( ...

  7. Python是否存在方法方法重载及是否可以不显示声明初始化方法

    一.python中是否存在方法重载 对java有了解的程序员都知道,java中存在构造方法重载和普通方法重载,重载指的是方法名相同,参数列表不同的多个方法.python中是否也支持这两种方法重载,测试 ...

  8. .NET GC简单理解

    内存分配 计算对象大小. 添加对象指针和同步索引块. 从内存指针处开始,分配对象内存. 问题:内存不能无限制增长. 垃圾回收 从应用程序实例出发,标记所有的引用对象. 将标记对象移动到低地址端,修正实 ...

  9. (转)js控制窗口失去焦点(包括屏蔽Alt+Tab键切换页面)

    本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...

  10. 五十四:WTForms表单验证之自定义表单验证器

    如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...