Code segmentation: SplitChunksPlugin configuration parameters related

(1) Magic Notes

In ordinary projects, we often see such code in the configuration routing

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

In Vue, using [import lazy loading statement] and [webpack magic comment], when the project is packaged by webpack, the code is divided into different modules. When loading on the first screen, which module is used and which module is loaded to achieve laziness Load to optimize the page.

The function of the magic comment is that when webpack is packaging, when the asynchronously imported library code is coded (you need to configure the SplitChunkPlugin plug-in of webpack), get the name for the divided code block

(2) Arrangement

main.js: Introduce components on demand

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

Only introduce vendors~lodash.fd26d44d5f0f2be61c8e.js when clicked

The packaged file name is vendors~lodash.fd26d44d5f0f2be61c8e js. If you want the packaged file name without vendors~prefix, you can modify webpack.common.jsthe optimizationconfiguration item,

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

Pack again: no prefix

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

In fact, html only introduces a js

Detailed configuration parameters:

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

Code segmentation: SplitChunksPlugin configuration parameters related

Guess you like