Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Конкретные функции и информацию о конфигурации оптимизации.splitChunks можно проверить онлайн.

Вот краткое введение в сценарии его использования, функции и способы его использования:

1. БесполезныйsplitChunks Перед субподрядом все модули объединяются в один файл, поэтому, если файл достаточно большой и скорость сети средняя, ​​первый экран будет загружаться очень медленно. Как показано ниже, эти три блока будут загружены вместе при первом входе в проект:

2. На данный момент мы используем SplitChunks для субподряда и настраиваем его в vue.config.js. Код следующий:

module.exports = {
  configureWebpack: {
    optimization: {
       splitChunks: {
	   chunks: 'all',
	   cacheGroups: {
	       libs: {
	         name: 'chunk-libs',
	         test: /[/]node_modules[/]/,
	         priority: 10,
	         chunks: 'initial' // only package third parties that are initially dependent
	       },
	       elementUI: {
	         name: 'chunk-elementUI', // split elementUI into a single package
	         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
	         test: /[/]node_modules[/]_?element-ui(.*)/ // in order to adapt to cnpm
	       },
	       commons: {
	         name: 'chunk-commons',
	         test: resolve('src/components'), // can customize your rules
	         minChunks: 3, //  minimum common number
	         priority: 5,
	         reuseExistingChunk: true
	       }
	   }
     }
   }
}

cacheGroupsдаsplitChunksСамая основная конфигурация внутри,splitChunksЭто основаcacheGroupsРазделить модуль.
После завершения настройки модуль будет расфасован во время упаковки. Как показано ниже:

В это время, когда вы заходите на определенную страницу и используете определенный модуль, будет загружен соответствующий пакет модулей.Реализуйте загрузку по требованию, что может значительно оптимизировать проблему медленной загрузки первого экрана.。