vue vendor 是什么东西 • Worktile社区

worktile

Worktile官方账号

Vue vendor 是指 Vue.js 的第三方库以及相关的依赖项。在开发 Vue.js 应用时，为了更好地组织和管理项目的依赖，通常会将相关的第三方库打包成一个单独的文件，这个文件就称为 vendor。将第三方库打包成 vendor 的好处是可以减少应用文件的大小，提高加载速度，并且方便进行缓存和更新。

在前端开发中，常用的第三方库有很多，比如 axios、element-ui、vuex 等。这些库都可以作为 Vue.js 的插件来使用，它们提供了各种功能和组件，方便开发者快速搭建应用。但是如果将这些库直接引入到应用文件中，会导致应用文件变得非常庞大，加载速度慢，并且每次更新时都需要重新加载这些库。

为了解决这个问题，我们可以将这些第三方库单独打包成一个 vendor 文件，并在应用的入口文件中引入。这样，在浏览器加载应用时，会先加载 vendor 文件，然后再加载应用文件。由于 vendor 文件通常比较大，但是不会频繁更新，所以可以将它进行缓存，以提高加载速度。而应用文件则可以根据需要进行更新，而不必重新加载 vendor 文件，从而节省了网络带宽和加载时间。

使用 Vue vendor 的方法很简单，只需在项目的 webpack 配置文件中进行相关的配置即可。一般来说，我们会将第三方库的配置单独提取出来，然后使用 webpack 的插件将其打包成 vendor 文件。这样，每次修改应用文件时，只需要重新加载应用文件，而不会重新加载 vendor 文件，提升了开发效率和用户体验。

综上所述，Vue vendor 是指将 Vue.js 的第三方库和相关依赖项打包成一个单独的文件，以提高应用的加载速度和管理依赖项的方式。通过合理使用 vendor，我们可以更好地组织和管理项目的依赖，提高开发效率和用户体验。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue vendor 是指在使用 Vue.js 进行开发时，通过 webpack 打包工具将第三方库或插件单独打包到一个单独的文件中，以减小入口文件的体积，提高应用的性能。

以下是关于 Vue vendor 的五个要点：

什么是 vendor
Vendor（供应商）是指第三方库或插件的集合。在使用 Vue.js 进行开发时，通常会使用一些第三方库来辅助开发，例如 axios 用于处理 HTTP 请求，vuex 用于状态管理，vue-router 用于前端路由等。这些第三方库通常是单独维护和更新的，所以将它们单独打包作为一个 vendor bundle 文件可以实现更好的缓存利用和更有效的更新。
为什么要使用 vendor
将第三方库或插件打包成一个单独的 vendor 文件有以下好处：

减小入口文件的体积：将第三方库单独打包后，入口文件只包含应用自身的代码，减小了入口文件的体积，加速了应用的加载速度。
提高缓存利用率：将第三方库打包为独立的文件，浏览器只需下载一次，并可以长时间缓存，这样在应用更新时，只需要下载应用自身的代码，减少了对第三方库的重复下载。
更好的代码分割和异步加载：将第三方库打包成 vendor 文件后，可以使用 webpack 的代码分割功能和懒加载策略，实现按需加载，减少了初始加载时的性能开销。

如何配置 vendor
在使用 webpack 进行打包时，可以配置将第三方库打包成 vendor 文件。具体的配置方式根据具体的项目来定，以下是一个示例的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: {
    app: './src/main.js',
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // 将 node_modules 中的模块打包到 vendor 文件
        return module.context && module.context.includes('node_modules');
      },
    }),
  ],
};

在上述例子中，使用了 webpack 的 CommonsChunkPlugin 插件，将来自 node_modules 中的模块打包成 vendor 文件。

如何使用 vendor
配置了 vendor 后，在应用中使用第三方库时，需要通过引入 vendor 文件来实现。在 HTML 文件中通过 script 标签引入 vendor 文件，然后在应用代码中引入第三方库，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Vendor</title>
</head>
<body>
  <div id="app"></div>

  <script src="vendor.js"></script>
  <script src="app.js"></script>
</body>
</html>

在上述例子中，先引入 vendor.js 再引入 app.js，确保第三方库先加载。

需要注意的问题
使用 vendor 时需要注意以下问题：

vendor 文件过大：如果将所有第三方库都打包到 vendor 文件中，可能导致 vendor 文件过大，影响应用加载速度。需要根据具体需求选择需要打包的第三方库。
版本控制：由于 vendor 文件会长期缓存，当应用更新时，vendor 文件的缓存需要被清除，否则用户将无法看到最新的应用版本。可以通过 webpack 插件（如 HtmlWebpackPlugin）来动态生成 HTML 文件，每次更新都会生成一个新的文件名，从而确保用户下载到最新的版本。

总结：
Vue vendor 是将第三方库或插件打包成单独的文件，以减小入口文件的体积，提高应用的性能。通过 webpack 的配置和插件可以实现 vendor 的功能，并通过 script 标签引入 vendor 文件来使用第三方库。需要注意 vendor 文件的大小和版本控制。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue vendor是指在使用Vue开发项目时，将Vue及其相关的第三方库（如Vue Router、Vuex等）单独打包生成的文件。这些文件包含了Vue及相关库的源码和依赖项，一般以vendor开头命名，如vendor.js。

Vue vendor的作用是将Vue及相关库的代码单独打包，与项目自身的业务代码分离开来，从而达到优化性能和缩减文件体积的目的。

下面将介绍如何使用Vue vendor来优化项目性能。

1. 配置webpack

在项目的webpack配置文件中，需要对Vue及相关库进行单独打包配置。在webpack配置文件中添加以下代码：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendor'
    }
  },
};

这样配置后，webpack会将所有满足条件的第三方库代码提取到vendor.js文件中。

2. 引入vendor.js

在项目的入口文件（一般是main.js）中，需要引入vendor.js文件。可以在入口文件顶部添加以下代码：

import './vendor'

3. 构建项目

执行构建命令，重新打包项目。执行完毕后，可以在构建输出目录（一般是dist目录）中找到生成的vendor.js文件。

4. 优化效果

通过将Vue及相关库代码单独打包成vendor.js文件，可以实现以下优化效果：

缓存：浏览器可以单独缓存vendor.js文件，当项目上线后只有在库代码发生变化时才需要重新下载该文件，从而提高页面加载速度。
并行加载：由于vendor.js文件与业务代码分离，浏览器可以同时加载两个文件，从而减少页面加载时间。
文件体积减小：将Vue及相关库代码单独打包，可以减小业务代码的体积，提高页面加载速度。
代码分离：通过将Vue及相关库代码单独打包，可以实现代码分离，便于维护和升级。

通过使用Vue vendor，可以有效地优化项目性能，提高用户体验。

1年前 0条评论