快捷導(dǎo)航

vue.config.js中配置分包策略及常見的配置選項(xiàng)

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

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

前言

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

1、什么是代碼分包？

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

2、配置分包策略

在 Vue 項(xiàng)目中，可以通過修改 vue.config.js 文件來配置分包策略。以下是一個(gè)簡(jiǎn)單的配置示例：

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

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

3、分包配置選項(xiàng)

在配置分包策略時(shí)，有幾個(gè)常用的選項(xiàng)可以幫助您更好地控制分包行為：

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

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

4、分包示例一

本示例將echart組件進(jìn)行單獨(dú)分包。

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          // 將 echarts 單獨(dú)分包
          echarts: {
            test: /[\\/]node_modules[\\/]echarts[\\/]/,
            name: 'echarts',
            chunks: 'all',
            priority: 30,
          },
          // 默認(rèn)分包配置
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
    },
  },
};

5、分包示例二

本示例將node_modules文件夾下的所有組件，根據(jù)大小進(jìn)行分包，maxSize超過300k的進(jìn)行分包，分包的大小不小于minSize設(shè)置100k。也就是超過300k進(jìn)行分包，小于100k的不進(jìn)行分包。

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、總結(jié)

Vue.js 提供了靈活的分包策略配置選項(xiàng)，使得優(yōu)化應(yīng)用的加載性能變得更加簡(jiǎn)單。通過合理地配置分包策略，您可以將代碼分割成更小的塊，從而加快頁面加載速度，提升用戶體驗(yàn)。在實(shí)際項(xiàng)目中，根據(jù)應(yīng)用的情況來調(diào)整分包策略，從而獲得最佳的性能和用戶體驗(yàn)。

附：在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'
        }]);
    }
}

到此這篇關(guān)于vue.config.js中配置分包策略及常見的配置選項(xiàng)的文章就介紹到這了,更多相關(guān)vue.config.js配置分包策略內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: