vue vendor 是什么东西

Vue vendor 是指在使用Vue.js框架开发应用程序时，与应用程序代码分离的第三方库和框架代码。1、Vendor代码包含Vue.js库本身；2、其他第三方插件和工具；3、这些代码通常被打包工具（如Webpack）独立打包，以便提高应用程序的加载速度和维护性。

一、VUE VENDOR的定义

在现代前端开发中，Vue vendor一般指应用程序中所有外部依赖的库和框架代码，这些代码与应用程序的业务逻辑代码分开打包。Vue vendor代码通常包括：

Vue.js框架本身
Vue Router、Vuex等Vue生态系统组件
Axios等第三方HTTP库
其他外部依赖库，如Lodash、Moment.js等

这种分离有助于优化前端性能，因为这些库代码变化较少，用户浏览器可以缓存这些文件，从而减少重复下载的流量。

二、为什么需要分离VUE VENDOR代码

将Vue vendor代码分离的主要原因如下：

性能优化：分离后的vendor文件可以被浏览器缓存，减少重复下载，提高页面加载速度。
代码管理：有助于将业务代码与依赖库代码分开，方便管理和维护。
构建速度：在开发过程中，业务代码频繁变动，而依赖库相对稳定，分离构建可以加快开发构建速度。

三、如何分离VUE VENDOR代码

在使用Webpack打包时，可以通过配置来分离vendor代码。以下是一个简单的Webpack配置示例：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
module.exports = {
  entry: {
    app: './src/main.js',
    vendor: ['vue', 'vue-router', 'axios']
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new VueLoaderPlugin(),
    new webpack.optimize.SplitChunksPlugin({
      name: 'vendor'
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

四、使用VUE-CLI分离VENDOR代码

如果使用Vue CLI创建项目，Vue CLI已经内置了对vendor代码分离的支持。在vue.config.js中，你可以通过配置splitChunks来进一步优化分离：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'chunk-vendors',
            chunks: 'all'
          }
        }
      }
    }
  }
};

五、VUE VENDOR代码在生产环境中的应用

在生产环境中，分离vendor代码的好处尤为明显：

缓存利用：用户访问网站时，vendor代码可以被浏览器长期缓存，减少后续访问的加载时间。
CDN加速：将vendor代码托管在CDN上，可以进一步提升加载速度和减少服务器负载。
版本管理：通过版本号或哈希值管理文件，可以确保用户始终加载到最新的代码。

六、实例说明

以下是一个实际项目中的示例，展示了如何通过分离vendor代码来提升性能：

项目背景：一个电商网站，使用Vue.js开发，依赖多个第三方库如Vue Router、Vuex和Axios。

优化前：所有代码打包在一个文件中，文件大小超过1MB，首次加载时间较长。

优化后：通过Webpack配置，分离出vendor代码，业务代码和vendor代码分别打包，业务代码文件大小减少到300KB，首次加载时间显著减少。

配置如下：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
module.exports = {
  entry: {
    app: './src/main.js',
    vendor: ['vue', 'vue-router', 'vuex', 'axios']
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new VueLoaderPlugin(),
    new webpack.optimize.SplitChunksPlugin({
      name: 'vendor'
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'chunk-vendors',
          chunks: 'all'
        }
      }
    }
  }
};

七、总结和进一步建议

总结起来，分离Vue vendor代码是优化前端性能的关键步骤之一。通过分离外部依赖库代码，可以显著减少首次加载时间，提高用户体验。同时，利用浏览器缓存和CDN服务，可以进一步提升性能。

进一步建议：

定期更新依赖库：确保使用最新版本的第三方库，享受性能和安全性提升。
监控性能：使用前端性能监控工具（如Lighthouse）定期检查和优化应用性能。
持续优化构建配置：根据项目需求和规模，调整Webpack或其他打包工具的配置，以获得最佳性能。

通过这些措施，可以确保Vue.js应用在性能、维护性和用户体验方面都达到最佳状态。

相关问答FAQs：

1. 什么是Vue Vendor？

Vue Vendor是Vue.js的一个插件，用于优化和管理Vue.js应用程序中的第三方依赖。它的主要目的是将应用程序的第三方依赖库与自身代码分开，以便更好地管理和维护。

2. Vue Vendor有什么作用？

Vue Vendor的作用是将应用程序的第三方依赖库从主要的代码包中分离出来，从而实现更好的代码组织和维护。通过将第三方依赖库单独打包成一个独立的文件，可以减小主要代码包的大小，并提高应用程序的加载速度。此外，Vue Vendor还可以实现代码的懒加载，只有在需要时才加载对应的第三方依赖库，从而进一步提升应用程序的性能。

3. 如何使用Vue Vendor？

使用Vue Vendor可以分为以下几个步骤：

步骤一：安装Vue Vendor插件。可以通过npm或yarn安装Vue Vendor插件，运行以下命令：

npm install vue-vendor --save

或

yarn add vue-vendor

步骤二：在Vue.js应用程序的入口文件中引入Vue Vendor插件。在main.js文件中添加以下代码：

import Vue from 'vue'
import VueVendor from 'vue-vendor'

Vue.use(VueVendor)

步骤三：在Vue组件中使用Vue Vendor。在需要使用第三方依赖库的组件中，可以通过Vue Vendor的vendor指令来引入对应的第三方依赖库。例如：

<template>
  <div>
    <vendor name="lodash" url="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></vendor>
    <vendor name="moment" url="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></vendor>
  </div>
</template>

在上述示例中，vendor指令用于引入lodash和moment这两个第三方依赖库。

需要注意的是，引入第三方依赖库时，需要提供对应的名称（name）和URL（url）。Vue Vendor会自动处理依赖关系，并在需要时加载对应的第三方依赖库。

以上是关于Vue Vendor的一些基本信息和使用方法，希望能对您有所帮助！如果您还有其他问题，请随时提问。

文章标题：vue vendor 是什么东西，发布者：worktile，转载请注明出处：https://worktile.com/kb/p/3567813