Segmentation du code: paramètres de configuration SplitChunksPlugin liés

(1) Notes magiques

Dans les projets ordinaires, nous voyons souvent un tel code dans le routage de configuration

const Home = () => import(/* webpackChunkName: 'Home' */ '@/views/Home/Home.vue')
const Mine = () => import(/* webpackChunkName: 'Mine' */ '@/views/Mine/Mine.vue')
const Detail = () => import(/* webpackChunkName: 'Detail' */ '@/views/Detail/Detail.vue')
const Submit = () => import(/* webpackChunkName: 'Submit' */ '@/views/Submit/Submit.vue')
const RefundDetail = () => import(/* webpackChunkName: 'RefundDetail' */ '@/views/RefundDetail/Index.vue')
const config = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/mine',
    name: 'Mine',
    component: Mine
  }, {
    path: '/submit',
    name: 'submit',
    component: Submit
  }, {
    path: '/detail',
    name: 'detail',
    component: Detail
  }, {
    path: '/RefundDetail',
    name: 'RefundDetail',
    component: RefundDetail
  }
]

export default config

Dans Vue, en utilisant [import lazy loading statement] et [webpack magic comment], lorsque le projet est empaqueté par webpack, le code est divisé en différents modules. Lors du chargement sur le premier écran, quel module est utilisé et quel module est chargé pour atteindre la paresse Charger pour optimiser la page.

La fonction du commentaire magique est que lorsque le webpack est empaqueté, lorsque le code de bibliothèque importé de manière asynchrone est codé (vous devez configurer le plug-in SplitChunkPlugin du webpack), obtenez le nom du bloc de code divisé

(2) Arrangement

main.js: introduire des composants à la demande

async function getComponent() {
  const lodash  = await import(/* webpackChunkName: 'lodash' */'lodash')
  var element = document.createElement('div');
  element.innerHTML = lodash.isEmpty(null)
  return element;
}

document.addEventListener('click', () => {
  /* 当点击时才加载lodash */
  getComponent().then(element => {
    document.body.appendChild(element);
  })
})

Ne présentez les fournisseurs que ~ lodash.fd26d44d5f0f2be61c8e.js lorsque vous cliquez dessus

Le nom du fichier packagé est vendors~lodash.fd26d44d5f0f2be61c8e js. Si vous voulez le nom du fichier packagé sans vendors~préfixe, vous pouvez modifier webpack.common.jsl' optimizationélément de configuration,

optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: false,
        default: false
      }
    }
  }

Emballez à nouveau: pas de préfixe

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack test</title>
</head>

<body>
  <div id="app"></div>
  <script src="main.7316c35c9a7ebc2c1b5f.js"></script>
</body>

</html>

En fait, html n'introduit qu'un js

Paramètres de configuration détaillés:

splitChunks: {
  // all/async: all 是对所有代码分割 async是对异步代码分割（多用于组件引入）
  // 如果设置了async，组件同步引入，不会分割打包，全都打包在 main.js
  chunks: 'async',
  minSize: 0,  // 引入模块大于minSize（kb）才进行代码分割
  maxSize: 1, // 如果打包好的js大于maxSize（kb）,则会进行二次分割
  minChunks: 1, // 引入模块至被使用minChunks(次)后才进行代码分割
  maxAsyncRequests: 5, // 同时加载的模块数不超过maxAsyncRequests， 如果超过 maxAsyncRequests， 剩余的模块不做代码分割
  maxInitialRequests: 3, // 入口文件同时加载的模块数不超过 maxInitialRequests
  automaticNameDelimiter: '~', // 生成文件名称的链接符号 如 vendors~main.js
  name: true,
  // 根据 cacheGroups，判断分割到哪里去
  // 如果是 node_modules 里的，打包到vendors.js 里
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10, // 优先级 
      filename: 'vendors.js' // 打包文件名称
    },
    // 除了 node_modules 里的，放到 common.js 里
    default: {
      minChunks: 2,
      priority: -20,
      filename: 'common.js',
      reuseExistingChunk: true // 是否复用已打包代码
    }
  }
}
}

Segmentation du code: paramètres de configuration SplitChunksPlugin liés

Je suppose que tu aimes