コードセグメンテーション：関連するSplitChunksPlugin構成パラメーター

（1）マジックノート

通常のプロジェクトでは、構成ルーティングでこのようなコードがよく見られます

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

Vueでは、[import lazyloadingstatement]と[webpackmagiccomment]を使用して、プロジェクトをwebpackでパッケージ化すると、コードが異なるモジュールに分割されます。最初の画面でロードするときに、どのモジュールが使用され、どのモジュールがロードされるかによって、遅延が発生します。ページを最適化するためにロードします。

マジックコメントの機能は、webpackがパッケージ化されているとき、非同期にインポートされたライブラリコードがコーディングされているとき（webpackのSplitChunkPluginプラグインを構成する必要がある）、分割されたコードブロックの名前を取得することです。

（二）配置

main.js：オンデマンドでコンポーネントを導入

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

クリックした場合にのみvendors〜lodash.fd26d44d5f0f2be61c8e.jsを紹介します

パッケージ化されたファイル名はvendors~lodash.fd26d44d5f0f2be61c8ejsです。vendors~プレフィックスなしでパッケージ化されたファイル名が必要な場合webpack.common.jsは、optimization構成アイテムを変更できます。

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

再度パック：プレフィックスなし

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

実際、htmlはjsのみを導入します

詳細な構成パラメーター：

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 // 是否复用已打包代码
    }
  }
}
}

コードセグメンテーション：関連するSplitChunksPlugin構成パラメーター

おすすめ