vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue.config.js配置分包策略

vue.config.js中配置分包策略及常见的配置选项

作者:sg_knight

在Vue.js中分包(Code Splitting)是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于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、分包配置选项

在配置分包策略时,有几个常用的选项可以帮助您更好地控制分包行为:

通过调整这些选项,您可以根据实际需求来优化分包策略,从而实现更好的加载性能。

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配置分包策略内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文