vue.config.js中配置分包策略及常見的配置選項

更新時間：2024年02月01日 11:49:42 作者：sg_knight

在Vue.js中分包（Code Splitting）是一種將應用程序代碼拆分為不同的塊或包的技術,從而在需要時按需加載這些包,下面這篇文章主要給大家介紹了關于vue.config.js中配置分包策略及常見的配置選項的相關資料,需要的朋友可以參考下

前言

構建大型 Vue.應用時，代碼的體積逐漸增大，可能會影響應用的性能和加載速度。為了優(yōu)化應用的加載性能，Vue 提供了一種配置分包策略的方法，允許將代碼分割成更小的塊，按需加載，從而減小初始加載的大小。在本文中，我們將學習如何在 vue.config.js 文件中配置分包策略，以及一些常見的配置選項。

1、什么是代碼分包？

代碼分包是一種將應用的代碼按照一定的規(guī)則和策略分割成不同的塊，然后在需要的時候進行加載的方法。這可以幫助減小初始加載的文件大小，從而提高頁面加載速度。Vue 提供了一種配置分包策略的方式，允許您將不同模塊、庫以及異步加載的代碼分割成單獨的文件，從而更好地利用瀏覽器的緩存機制。

2、配置分包策略

在 Vue 項目中，可以通過修改 vue.config.js 文件來配置分包策略。以下是一個簡單的配置示例：

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

在上述示例中，我們使用了 splitChunks 選項來配置分包策略。cacheGroups 對象允許您定義不同的緩存組，每個組代表一個分包的規(guī)則。在這里，我們創(chuàng)建了一個名為 vendor 的緩存組，它會匹配 node_modules 下的模塊，并將它們打包成一個單獨的 vendor.js 文件。

3、分包配置選項

在配置分包策略時，有幾個常用的選項可以幫助您更好地控制分包行為：

test: 用于匹配需要分割的模塊，可以使用正則表達式或函數。
name: 指定生成的分包文件的名稱，可以是字符串或函數。
chunks: 指定分包策略應用于哪些塊，可以是 'initial'、'async'、'all' 等。
priority: 指定緩存組的優(yōu)先級，數字越大優(yōu)先級越高。
minSize 和 maxSize: 指定分包的大小范圍，超過或小于這個范圍的模塊會被分割。
reuseExistingChunk: 是否重用已有的分包，避免重復打包。

通過調整這些選項，您可以根據實際需求來優(yōu)化分包策略，從而實現更好的加載性能。

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 提供了靈活的分包策略配置選項，使得優(yōu)化應用的加載性能變得更加簡單。通過合理地配置分包策略，您可以將代碼分割成更小的塊，從而加快頁面加載速度，提升用戶體驗。在實際項目中，根據應用的情況來調整分包策略，從而獲得最佳的性能和用戶體驗。

附：在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配置分包策略內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: