Vue Vue常用的几种项目优化方法_vue页面优化主要从哪些方面进行-优快云博客

本文链接：https://blog.youkuaiyun.com/Sillydreamboy/article/details/118817261

本文介绍了Vue项目从代码层面、Webpack打包层面和基础Web技术层面的优化方法。包括长列表性能优化、事件销毁、图片懒加载、路由懒加载、按需加载插件等代码优化策略；Webpack的图片压缩、公共代码提取、模板预编译等打包优化；以及开启gzip压缩、利用浏览器缓存、使用CDN和Chrome Performance分析性能瓶颈等基础Web技术优化手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目优化

Vue项目的优化一般分为代码层面、Webpack打包层面和基础Web技术层面共三个层面的优化。

1 代码层面的优化

1 长列表性能优化

有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，能够很明显的减少组件初始化的时间。
可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

2 事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器。在beforeDestroy生命周期函数内执行销毁逻辑。

3 图片懒加载

将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。能有效提高加载性能和用户体验。
使用vue-lazyload插件来实现图片懒加载
- 安装
```
npm install vue-lazyload --save-dev
```
- 在入口文件main.js中引入插件并使用
```
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
```
- 在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示
```
<img v-lazy="/static/img/1.png"/>
```

4 路由懒加载

Vue是单页面应用，路由较多，Webpack打包后文件很大。首页加载时可能会出现白屏现象，用户体验差。

可以把不同路由对应的组件分割成不同的代码块，只有当路由被访问的时候才加载对应的组件。减少资源占用。

方式一：Vue异步组件技术，可以实现按需加载

异步组件是通过将组件定义为返回 Promise 的函数来创建的

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
    //或
    //component: asyncModal = () => import('./Modal.vue')
}

方式二：将同一块中的组件分组

多个路由指定相同的chunkName，会合并打包成一个js文件

//未指定webpackChunkName，每个组件打包成一个js文件。
const I1 = () => import('../components/I1')
const I2 = () => import('../components/I2')
// 指定相同的webpackChunkName，会合并打包成一个js文件。
// const I1 = () => import(/* webpackChunkName: 'II' */ '../components/I1')
// const I2 = () => import(/* webpackChunkName: 'II' */ '../components/I2')
export default new Router({
    routes: [
        {
            path: '/i1',
            name: 'I1',
            component: I1
        },
        {
            path: '/i2',
            name: 'I2',
            component: I2
        }
    ]
})

方式三：Webpack的require.ensure()

vue-router配置路由，webpack的require.ensure()技术，可以实现按需加载。

{
     path: '/promisedemo',
     name: 'PromiseDemo', 
     component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
     path: '/hello',
     name: 'Hello',
     // component: Hello
     component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}

5 按需加载插件

只引入需要的组件，以达到减小项目体积的目的。

借助babel-plugin-component

安装
```
npm install babel-plugin-component -D
```

修改.babelrc文件

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

在main.js文件中引入部分组件

import { Button } from 'components'
var button = require('components/lib/button')
require('components/lib/button/style.css')

2 Webpack层面的优化

2.1 压缩图片

在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。

有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片。

安装

npm install image-webpack-loader --save-dev

在 webpack.base.conf.js 中进行配置

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,	//限制图片大小
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

2.2 提取公共代码

2.3 模板预编译

预编译模板最简单的方式就是使用单文件组件

2.4 提取组件的 CSS

2.5 优化 SourceMap

2.6 构建结构输出分析

2.7 Vue项目的编译优化

3 基础的Web技术优化

3.1 开启gzip压缩

HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。

服务器端使用express

安装
```
npm install compression --save
```

添加逻辑代码

var compression = require('compression');
var app = express();
app.use(compression())

重启服务，观察网络面板里面的响应头

3.2 浏览器缓存

对静态资源进行缓存
根据是否需要重新向服务器发起请求来分类，将 HTTP 缓存规则分为两大类
- 强制缓存
- 对比缓存

3.3 CDN的使用

CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率。

3.4 Chrome Performance 查找性能瓶颈

Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间，分析页面性能。