vue项目打包优化

简介: vue项目打包优化

vue性能优化的那些事

首屏性能优化

vue项目进行性能优化,可以从以下几个方面入手:

  • 优化打包体积
  • 路由懒加载
  • 图片懒加载
  • 静态资源CDN

接下来,让我们来一一聊下:

优化项目打包体积

这个就不用赘述了,.原理就是通过webpack进行一个gzip打包

路由懒加载

路由懒加载就是在我们使用到这个路由的时候才去加载
在router.js中
以前是:

import Home from '../views/Home.vue'
{
  path: "/login",
  name: "login",
  component: Home,
  meta: {
    title: "登录页",
  },
}

换成懒加载

{
  path: "/login",
  name: "login",
  component: () => import("../views/login/login.vue"),
  meta: {
    title: "登录页",
  },
}

图片懒加载

我在网上看到的一个比较不错的方案

<img src="https://i.loli.net/2017/08/08/5989307b6c87b.gif" data-xxx="${data.content[i].url}">

let images = document.querySelectorAll('img[data-xxx]')
for(let i = 0; i <images.length; i++){
  if(/* 出现在屏幕里(images[i]) */){
  // 一般判断这个高度用到高度有:浏览器高度,文档高度,滚动的高度
    images[i].src = images[i].getAttribute('data-xxx')
    images[i].removeAttribute('data-xxx')
  }
}

静态资源CDN

网站上所有的静态图片以及css和公用的js文件(如jq)都可以放cdn上面,图片这些完全可以上传到OSS对象存储上去,然后前端一个url引用就可以了.

vue打包优化

屏蔽掉项目的console.log

为什么需要过滤console.log?

在我们日常的开发过程中,console.log经常用于打印变量或者日志.但是当我们打包项目进行部署的时候,这些东西肯定不希望被用户看到,所以肯定要先把所有的console.log删除,如果我们一个一个console删的话,是非常大的工作量,幸好,我们可以通过很简单的配置就可以在打包项目的时候屏蔽掉所有的console

如何进行配置?

1.安装插件

npm install terser-webpack-plugin --save-dev

2.配置vue.config.js

打开根目录下的vue.config.js,如果没有就新建个.添加以下配置:

module.export = {
  configureWebpack: (config)=> {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}

优化打包体积

打包过vue项目的同学都知道,一个很简单的页面,打包出来的js也可能到几百k,如果是稍微大点的项目,那可不得了,瞬间到几M大.很明显,用户请求这么大的资源会严重影响体验,所以,有没有一个办法可以将我们打包后的体积缩小呢?有,那就是gzip.

前端需要干的事情

首先安装compression-webpack-plugin npm i compression-webpack-plugin
然后,到前端项目根目录的vue.config.js中去引入插件

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

然后添加配置

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
  }

完整的配置是:

const path = require("path");
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = {
  ...
  configureWebpack: (config) => {
    // 压缩打包
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
  }
  ...
};

前端需要做的事情就这些,然后就可以开心的npm run build
可以发现

 File                                    Size              Gzipped

  dist\js\chunk-vendors.c7009e9b.js       819.98 KiB        219.07 KiB
  dist\js\chunk-a01fb474.0382d40e.js      362.91 KiB        124.43 KiB
  dist\js\chunk-23562f52.3e2452a7.js      29.79 KiB         12.49 KiB
  dist\js\app.0dc23b38.js                 6.16 KiB          2.50 KiB
  dist\js\chunk-0b48facb.ba5d6037.js      2.83 KiB          1.21 KiB
  dist\js\chunk-eb4844f4.01be346c.js      0.49 KiB          0.34 KiB
  dist\js\chunk-2d0e93d2.b5a32012.js      0.31 KiB          0.26 KiB
  dist\js\chunk-2d0c8d95.13101597.js      0.31 KiB          0.26 KiB
  dist\js\chunk-2d0c795c.78156126.js      0.29 KiB          0.24 KiB
  dist\lib\env.js                         0.06 KiB          0.08 KiB
  dist\css\app.5f0aaa59.css               241.31 KiB        44.11 KiB
  dist\css\chunk-23562f52.d3405d23.css    1.94 KiB          0.64 KiB
  dist\css\chunk-0b48facb.76a5254c.css    1.92 KiB          0.60 KiB
  dist\css\chunk-eb4844f4.679c8099.css    0.08 KiB          0.08 KiB

压缩效率是非常高的,可以大大的节省我们在浏览器中加载页面的时间

后端需要做的事情

当然,前端打包成了gz格式的文件,Nginx是需要配置才能生效的
打开Nginx安装目录的config下的nginx.conf


http:{ 
      gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
                 image/gif image/png;
}

配置完后,记得重启

目录
相关文章
|
10天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
113 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
544 0
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
108 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
238 1
|
JavaScript
vue项目打包中遇到的坑
vue项目打包中遇到的坑
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
763 4
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
540 77
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
366 17