Teknologian jakaminen

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

Optimation.splitChunksin erityiset toiminnot ja konfigurointitiedot voidaan tarkistaa verkossa.

Tässä on lyhyt esittely sen käyttöskenaarioista, toiminnoista ja sen käytöstä:

1. HyödytönsplitChunks Ennen alihankintaa kaikki moduulit niputetaan yhteen tiedostoon, joten kun tiedosto on riittävän suuri ja verkon nopeus on keskimääräinen, ensimmäinen näyttö latautuu hyvin hitaasti. Kuten alla näkyy, nämä kolme lohkoa ladataan yhdessä, kun projektiin tullaan ensimmäistä kertaa:

2. Tällä hetkellä käytämme splitChunksia alihankintaan ja määritämme sen tiedostossa vue.config.js. Koodi on seuraava:

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
	       }
	   }
     }
   }
}

cacheGroupsJoosplitChunksKeskeisin kokoonpano sisällä,splitChunksSe on perustacacheGroupsModuulin jakaminen.
Kun konfigurointi on valmis, moduuli pakataan pakkaamisen aikana. Kuten alla:

Tällä hetkellä, kun siirryt tietylle sivulle ja käytät tiettyä moduulia, vastaava moduulipaketti ladataan.Ota käyttöön on-demand-lataus, joka voi optimoida suuresti ensimmäisen näytön hitaan lataamisen ongelman。