vue.config.js中配置分包策略及常见的配置选项
前言
构建大型 Vue.应用时，代码的体积逐渐增大，可能会影响应用的性能和加载速度。为了优化应用的加载性能，Vue 提供了一种配置分包策略的方法，允许将代码分割成更小的块，按需加载，从而减小初始加载的大小。在本文中，我们将学习如何在 vue.config.js 文件中配置分包策略，以及一些常见的配置选项。
1、什么是代码分包？
代码分包是一种将应用的代码按照一定的规则和策略分割成不同的块，然后在需要的时候进行加载的方法。这可以帮助减小初始加载的文件大小，从而提高页面加载速度。Vue 提供了一种配置分包策略的方式，允许您将不同模块、库以及异步加载的代码分割成单独的文件，从而更好地利用浏览器的缓存机制。
2、配置分包策略
在 Vue 项目中，可以通过修改 vue.config.js 文件来配置分包策略。以下是一个简单的配置示例：
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
},
},
};
在上述示例中，我们使用了 splitChunks 选项来配置分包策略。cacheGroups 对象允许您定义不同的缓存组，每个组代表一个分包的规则。在这里，我们创建了一个名为 vendor 的缓存组，它会匹配 node_modules 下的模块，并将它们打包成一个单独的 vendor.js 文件。
3、分包配置选项
在配置分包策略时，有几个常用的选项可以帮助您更好地控制分包行为：
test: 用于匹配需要分割的模块，可以使用正则表达式或函数。name: 指定生成的分包文件的名称，可以是字符串或函数。chunks: 指定分包策略应用于哪些块，可以是'initial'、'async'、'all'等。priority: 指定缓存组的优先级，数字越大优先级越高。minSize和maxSize: 指定分包的大小范围，超过或小于这个范围的模块会被分割。reuseExistingChunk: 是否重用已有的分包，避免重复打包。
通过调整这些选项，您可以根据实际需求来优化分包策略，从而实现更好的加载性能。
4、分包示例一
本示例将echart组件进行单独分包。
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
// 将 echarts 单独分包
echarts: {
test: /[\\/]node_modules[\\/]echarts[\\/]/,
name: 'echarts',
chunks: 'all',
priority: 30,
},
// 默认分包配置
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
},
};
5、分包示例二
本示例将node_modules文件夹下的所有组件，根据大小进行分包，maxSize超过300k的进行分包，分包的大小不小于minSize设置100k。也就是超过300k进行分包，小于100k的不进行分包。
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
},
chunks: "all",
enforce: true,
priority: 10,
minSize: 100000, // 100KB
maxSize: 300000,
reuseExistingChunk: true,
},
},
},
},
},
};
6、总结
Vue.js 提供了灵活的分包策略配置选项，使得优化应用的加载性能变得更加简单。通过合理地配置分包策略，您可以将代码分割成更小的块，从而加快页面加载速度，提升用户体验。在实际项目中，根据应用的情况来调整分包策略，从而获得最佳的性能和用户体验。
附：在chainWebpack方法里的config配置方法
代码：
module.exports = {
chainWebpack: (config) => {
config.output.filename('js/dong/[name].[chunkhash:8].js');
config.output.chunkFilename('js/xxx/[name].[chunkhash:4].js');
// 这里是css
config.plugin('extract-css').tap(args => [{
filename: 'css/dd/[name].[contenthash:8].css',
chunkFilename: 'css/xx/[name].[contenthash:8].css'
}]);
}
}
到此这篇关于vue.config.js中配置分包策略及常见的配置选项的文章就介绍到这了,更多相关vue.config.js配置分包策略内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
require.js 加载 vue组件 r.js 合并压缩的实例
这篇文章主要介绍了require.js 加载 vue组件 r.js 合并压缩的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
Vuex modules模式下mapState/mapMutations的操作实例
这篇文章主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在vue项目中使用axios发送post请求出现400错误的解决
这篇文章主要介绍了在vue项目中使用axios发送post请求出现400错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于VUE中watch的详细使用教程,watch是vue实例的一个属性,主要用来监听数据的变化,并做出一些操作,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue组件开发之slider组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要为大家详细介绍了vue如何使用video.js实现播放m3u8格式的视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要为大家详细介绍了vue实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最近在写闭包的应用的时候，出现了一个cached函数，来源于Vue源码，利用了闭包变量不会被回收的特点，可以缓存变量，cached本质上是一个高阶函数，它接受一个函数的参数，同时返回一个函数2022-08-08
最新评论