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

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

时间: 2024-10-29 04:53:14

vue-router和webpack懒加载,页面性能优化篇的相关文章

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

?? Android ViewPager Fragment使用懒加载提升性能 Fragment在如今的Android开发中越来越普遍,但是当ViewPager结合Fragment时候,由于Android ViewPager内在的加载机制,导致一个比较严重的加载性能问题,具体来说,假设一个ViewPager中有n多个Fragment,那么ViewPager在初始化阶段将一次性的初始化FragmentPagerAdapter中的至少3个Fragment(如果Fragment多于3),创建和加载Fra

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

listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHolder 3.实现局部刷新 [转载请保留本文地址:http://www.cnblogs.com/goagent/p/5158064.html]  〇.最原始的加载 这里是不经任何优化的adapter,为了看起来方便,把listview的数据直接在构造函数里传给adapter了,代码如下: 1 priv

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

ionic 懒加载页面模块合并

ionic3 懒加载 ionic3 默认使用了懒加载技术,相较以前预加载的版本,ionic3构建的app在首页加载时间上有较大的优化,但是,ionic3默认每个页面都会对应一个模块,对于页面较多,但是每个模块都很小的应用可能并不怎么合理.于是,尝试将几个小模块合并为几个大的模块. 1. 一个模块对应一个页面: 默认状态下每个页面都会对应一个模块,如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js . 原setting.module.ts 1 import { NgModule

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

1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyload' // 404图片 import errImg from './assets/img/404.png' // loading图片 import loadingImg from './assets/img/loading-spin.svg' // 图片懒加载配置 Vue.use(VueLazylo

前端项目首屏加速 gzip打包 路由懒加载 cdn资源优化

目前主流的Vue, React 等单页项目中 build 把所有开发遇到的代码打包在一起形成一个js和一个css, 服务器请求, 然后加载js, css 等依赖进行渲染. 因此会经常遇到,个人写的项目,打开十分缓慢,需要加载很长时间才能加载完毕. 就算不是白屏,做了loading处理 但还是会很影响体验 排除服务器带宽实在太低, 服务器压力实在太大, 文件的大小是速度的第一影响. gzip打包 gzip打包很好理解. 请求的东西可以通过压缩的方式, 到了客户端再解压 采用nginx即可 配置方案

javascript的页面加载及性能优化(兼容IE7)

通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){        func1();        func2();        func3();        //更多加载事件……………… } 但是如果我们需要页面完全呈现前做一些东西呢,如通过脚本加载其他js文件,或在IE6实现fixed……这些东西就要用到domReady 了,domReady好像是jQuery的叫做,一个加载函数.在W3C的草稿中

Listview异步加载图片之优化篇

在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有bug,或是有性能问题有待优化.有鉴于此,本人在网上找了个相对理想的版本并在此基础上进行改造,下面就让在下阐述其原理以探索个中奥秘,与诸君共赏… 贴张效果图先: 2013-2-1 17:25 上传 下载附件 (214.08 KB) 异步加载图片基本思想: 1.      先从内存缓存中获取图片显示(内

Vue+Element中Table懒加载,新增、删除操作后手动更新

https://blog.csdn.net/qq_34817440/article/details/96482818 this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, id, []); 原文地址:https://www.cnblogs.com/zhaoyun4122/p/12134174.html