Vue项目优化

在日常的Vue项目开发中,随着业务的日渐负责,代码量的日益增加,随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本质上来解决这种问题。

这里大概例举几个在项目中实际用到过的方法,优化后的js大概缩小了50%左右,效果还是挺明显的。

1,webpack externals

为什么要配置externals

官方解释:webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

比如我们会在项目中引用各种第三方的js文件,如 jquery,vue,axios 等,如果我们在打包时排除这些依赖,则可以大大减小文件的大小,提高页面加载速度,配置方法如下:

// 在 index.js 中引入资源
<script src="jquery.js"></script>
<script src="vuex.js"></script>

module.exports = {
     ...
     output: {
       ...
     },
     externals : {
       jquery: 'jQuery'
       'vue': 'Vue',
     }
     ...
   }

这样就剥离了那些不需要改动的依赖模块,换句话,下面展示的代码还可以正常运行:

import $ from 'jquery';
import Vue from 'vue'

这样不仅之前对第三方库的用法方式不变,还把第三方库剥离出webpack的打包中,从而加速webpack的打包速度。

2,组件按需加载

这也是可以优化的点。如果频繁使用了第三方组件/UI库,如我的项目中经常使用了 element-ui 组件库,如果全部引入,项目体积非常大,这时可以按需引入组件。

首先,我们需要安装 babel-plugin-component

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后引入部分组件,这样一来,就不需要引入样式了,插件会帮我们处理。

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'

[Dialog, Loading].forEach((comp) => {
    Vue.use(comp);
})

3,路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

方法一

const login = () => import('@/components/login')
const router = new VueRouter({
  routes: [
    { path: '/login', component: login }
  ]
})

注意:这个时候我们需要安装 babel-plugin-syntax-dynamic-import 插件,这样打包时才会识别该语法

方法二

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

4,数据缓存——keep-alive

VUE2.0中提供了一个keep-alive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗。

举例:用户浏览A页面,待A页面的资源都加载完毕了,用户通过路由跳转到了B页面,之后又退回到了A页面,如果没有特殊处理的话,A页面的资源会重新加载一遍,造成资源浪费;若我们做了缓存,则可以减少请求的次数,极高用户体验。

1,缓存部分页面

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// router 设置如下
routers:[
    {   path: '/home',
        name: home,
        meta: {keepAlive: true}      //  设置为true表示需要缓存,不设置或者false表示不需要缓存              
    }
]

2,缓存组件

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

// include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

除了以上的优化方法外,还有常规的 图片的压缩合并、CDN加速、压缩代码等方法,大家应该都很熟悉了,这里就不在一一阐述了。如果大家还有好的优化方案,欢迎大家留言交流~

原文链接:segmentfault.com

上一篇:Webpack源码阅读之Tapable
下一篇:vue插件vue-cropper的使用小计

相关推荐

  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    9 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 个月前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀虽小五脏俱全的Vue拉勾项目,看看应该有帮助

    全栈系列Vue版拉勾,客官们来瞧瞧 模拟拉勾app系列vue前端界面 github地址,来猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本项目...

    1 年前
  • 高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

    前言 事实上, 只有的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余的最终用户体验。

    10 个月前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 首页白屏优化实践

    前言 自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范...

    7 个月前

官方社区

扫码加入 JavaScript 社区