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懒加载,页面性能优化篇的更多相关文章
- js动态加载js文件(js异步加载之性能优化篇)
1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...
- Android ViewPager Fragment使用懒加载提升性能
Android ViewPager Fragment使用懒加载提升性能 Fragment在如今的Android开发中越来越普遍,但是当ViewPager结合Fragment时候,由于Androi ...
- 一步一步实现listview加载的性能优化
listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...
- vue webpack 懒加载
自己项目中的写法 const router = new Router({ routes: [ { path: '/index', component: (resolve) => { requir ...
- vue 路由懒加载 使用,优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...
- vue + vue-lazyload 实现图片懒加载
1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...
- vue实现menu菜单懒加载
本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...
随机推荐
- ValueError: Cannot assign "\<QuerySet [<Area: China>]\>": "Area.parent" must be a "Area" instance.
在研究才Django自关联的过程中,在插入数据时爆出如下错误: ValueError: Cannot assign "<QuerySet [<Area: China>]&g ...
- MemoScope.Net
What is MemoScope.Net ? It's a tool to analyze .Net process memory: it can dump an application's mem ...
- Python中列表的使用
python中的列表与java中的数组非常类似,但使用方法比java中数组简单很多,python中的数据类型不需要显示声明,但在使用时必须赋值,列表元素下标从0开始 初始化列表(初始化一个包含五个元素 ...
- LC 789. Escape The Ghosts
You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...
- Centos7 Devstack [Rocky] 重启后无法联网
部署devstack-rocky版本后网络,可以 Ping 通自己的 IP,但 Ping 不同网关,ping不通同网段主机,查看网卡和ovs信息如下 解决 第一步 按造网上教程,修改br-ex,ens ...
- OpenStack 虚拟机启动流程 UML 分析(内含 UML 源码)
目录 文章目录 目录 前言 API 请求 Nova API 阶段 Nova Conductor 阶段 Nova Scheduler 阶段 Nova Compute 阶段(计算节点资源分配部分) Nov ...
- 六十三:CSRF攻击与防御之系统准备之登录与转账功能
登录功能 在forms里面添加验证 class LoginForm(Form): email = StringField(validators=[Email(message='邮箱格式错误')]) p ...
- c++ STL之unordered_set
unordered_set的特点: 自身值就是主键,所以值唯一并且不可修改 基于hash表的无序排列 unordered_set基于哈希表,是无序的. 在一个 unordered_set 容器中,元素 ...
- Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU)
Spark3.0 preview预览版可以下载使用,地址:https://archive.apache.org/dist/spark/spark-3.0.0-preview/,pom.xml也可以进行 ...
- MySQL 5.7 中文全文检索
MySQL 5.7 中文全文检索 在 MySQL 5.7.6 之前,全文索引只支持英文全文索引,不支持中文全文索引,需要利用分词器把中文段落预处理拆分成单词,然后存入数据库.从 MySQL 5.7.6 ...