Segmentación de código: parámetros de configuración de SplitChunksPlugin relacionados

(1) Notas mágicas

En proyectos ordinarios, a menudo vemos dicho código en el enrutamiento de configuración

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

En Vue, usando [importar declaración de carga diferida] y [comentario mágico de paquete web], cuando el proyecto está empaquetado por paquete web, el código se divide en diferentes módulos. Al cargar en la primera pantalla, qué módulo se usa y qué módulo se carga para lograr la pereza Cargue para optimizar la página.

La función del comentario mágico es que cuando el paquete web está empaquetado, cuando se codifica el código de la biblioteca importado asincrónicamente (necesita configurar el complemento SplitChunkPlugin del paquete web), obtenga el nombre del bloque de código dividido

(2) Arreglo

main.js: introducción de componentes bajo demanda

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

Solo introduzca proveedores ~ lodash.fd26d44d5f0f2be61c8e.js cuando haga clic en

El nombre del archivo empaquetado es vendors~lodash.fd26d44d5f0f2be61c8e js. Si desea el nombre del archivo empaquetado sin vendors~prefijo, puede modificar webpack.common.jsel optimizationelemento de configuración,

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

Empacar de nuevo: sin prefijo

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

De hecho, html solo introduce un js

Parámetros de configuración detallados:

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

Segmentación de código: parámetros de configuración de SplitChunksPlugin relacionados

Supongo que te gusta