División de código del paquete web (división de código)

(1. Antecedentes

En el proyecto, usualmente usamos algunos complementos, como cargash, element-ui, axios, etc. Si no se realiza ninguna operación, estos [complementos] y [código de lógica empresarial] se empaquetarán en un archivo js (main. js)

index.js:

import { flatten }  from './number'
var arr = [1, 2, [3, 4, [5, 6]]]
var result = flatten(arr)
console.log(result)

number.js

const lodash = require('lodash')
export function flatten (arr) {
  return lodash.flatten(arr)
}

Resultado de embalaje:

Si el complemento es de 1 kb, el código de lógica empresarial es de 1 kb, cambie el código de negocio una vez, vuelva a empaquetarlo una vez, cambie el código de negocio una vez, vuelva a empaquetarlo una vez y cada paquete tendrá 2 KB. Si adoptamos el método de división de código, empaquete el complemento en un js , El código de lógica de negocios está empaquetado en un js. Cada vez que se cambia el código de lógica de negocios, solo se empaquetará el js de lógica de negocios, que es de solo 1 Kb, lo que ahorra tiempo de empaquetado. Este es el significado principal de la división de código.

El enfoque principal es empaquetar lodash por separado

webpack.config.js:

entry: {
    main: './src/main.js',
    lodash: './src/lodash.js'
  },

output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  }

Bala:

<!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.381b139bf6332969bc3e.js"></script>
  <script src="lodash.381b139bf6332969bc3e.js"></script>
</body>

</html>

Se introducen dos archivos js en index.html

(2) Utilice el paquete web para configurar la división de código

Agrega dos líneas de código

optimization: {
    usedExports: true,
    // 代码分割
    splitChunks: {
      chunks: 'all'
    }
  },

Después del envasado:

index.html:

main.269e60289818f70af114.js: este js es principalmente código de lógica empresarial

vendors ~ main.269e60289818f70af114.js: este archivo es principalmente el código de colección js del complemento

División de código del paquete web (división de código)

Supongo que te gusta