vue vendor是做什么-vue 是啥

来源：互联网 2024-11-16 05:47:51 版权归原作者所有，如有侵权，请联系我们

Vue Vendor 是指在 Vue.js 项目中，包含外部库和框架的代码文件，这些文件在项目打包时作为单独的文件天生。其主要作用是1、提高项目构建速率，2、优化缓存，3、减少重复加载。

一、提高项目构建速率

在 Vue.js 项目中，使用 Vue Vendor 文件可以显著提高构建速率。这是因为：

缓存机制：当依赖库的代码被打包到单独的文件中时，若是代码没有变化，构建工具（如 Webpack）可以使用缓存，从而避免重复构建这些代码。 减少编译时间：项目的业务代码和依赖库代码分离，使得业务代码的变更不会触发依赖库的重新编译，大大减少了编译时间。

二、优化缓存

Vue Vendor 文件可以优化浏览器的缓存机制，从而提升用户体验：

长效缓存：外部库和框架的代码通常变化不大，打包成单独的文件后，浏览器可以对其进行长期缓存，减少后续访问时的加载时间。 缓存分离：业务代码和依赖库的代码分离后，即使业务代码频仍更新，只要依赖库没有变化，浏览器无需重新下载依赖库的文件。

三、减少重复加载

将依赖库打包到 Vue Vendor 文件，可以减少重复加载：

共享依赖：多个页面或模块依赖同一库时，可以通过 Vue Vendor 文件共享这些依赖，避免每个页面都重复加载相同的库文件。 优化网络资源：减少重复加载可以优化网络资源的使用，提升网站整体性能。

四、怎样设置 Vue Vendor 文件

设置 Vue Vendor 文件的步骤如下：

安装依赖：确保项目中已经安装了必要的构建工具（如 Webpack）。 修改 Webpack 设置：在 Webpack 设置文件中，使用 optimization.splitChunks 选项来指定需要分离打包的依赖库。 module.exports = {

// 其他设置

optimization: {

splitChunks: {

cacheGroups: {

vendor: {

test: /[\\/]node_modules[\\/]/,

name: vendor,

chunks: all,

};

打包构建：运行构建命令，天生包含依赖库的 vendor 文件。

五、实例说明

以下是一个现实项目中使用 Vue Vendor 文件的示例：

项目描述：一个使用 Vue.js 构建的电商网站，依赖于 Vue Router 和 Vuex。

实现步骤：

安装依赖库：npm install vue-router vuex 修改 Webpack 设置，分离打包 Vue Router 和 Vuex： module.exports = {

// 其他设置

optimization: {

splitChunks: {

cacheGroups: {

vendor: {

test: /[\\/]node_modules[\\/](vue-router|vuex)[\\/]/,

name: vendor,

chunks: all,

};

打包构建，天生包含 Vue Router 和 Vuex 的 vendor 文件。

六、总结与建议

总结来说，Vue Vendor 文件在 Vue.js 项目中起到了提高项目构建速率、优化缓存和减少重复加载的作用。通过合理设置 Vue Vendor 文件，可以显著提升项目的性能和用户体验。建议开发者在项目开发初期就考虑设置 Vue Vendor 文件，以最大化地利用构建工具的优势，提高开发效率和项目性能。

进一步的建议包括：

定期检查依赖库的更新：确保使用最新版本的依赖库，同时避免频仍更新以保持缓存的稳定性。 监控构建性能：使用构建工具的性能剖析插件，监控构建过程中的性能瓶颈，及时优化设置。测试缓存效果：在不同浏览器中测试缓存效果，确保设置的 Vue Vendor 文件能够被有效缓存，提升用户体验。