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;
}

配置完后,记得重启

目录
相关文章
|
2天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
3天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
15 7
|
3天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
13 6
|
3天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
15 6
|
2天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
11 3
|
3天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
2天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
8 1
|
4天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
19 2
|
4天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
vue全局公共组件自动引入并注册,开发效率直接起飞!
25 1
|
1天前
|
缓存 JavaScript 数据管理
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。