Vue项目优化

NervosNetwork 发布于2019-08-26 10:48 / 965人阅读

摘要：，组件按需加载这也是可以优化的点。如果大家还有好的优化方案，欢迎大家留言交流

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

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

1，webpack externals

为什么要配置externals

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

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

// 在 index.js 中引入资源




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，缓存部分页面


    



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

2，缓存组件



  


// include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

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

云服务器 GPU云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106809.html

vue首屏加载优化

摘要：为了让事情更简单，允许将组件定义为一个工厂函数，动态地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前首先我们在正常情况下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

keithxiaoy 2019-08-02 16:12 评论0 收藏0
记一次Vue项目优化及思路

摘要：记录一个前端项目优化的路程，效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到，中也看不到的踪影了。本文主要想提供一些优化思路及手段，即如何定位通过，查看页面加载时间问题，然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程，效果如上图。接下来我...

nanchen2251 2019-08-23 16:49 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0