(1. Hintergrund
Im Projekt verwenden wir normalerweise einige Plug-Ins wie loadsh, element-ui, axios usw. Wenn keine Operation ausgeführt wird, werden diese [Plug-Ins] und [Geschäftslogikcode] in eine js-Datei (main) gepackt. 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)
}Verpackungsergebnis:
Wenn das Plug-In 1 KB groß ist, ist der Geschäftslogikcode 1 KB groß. Ändern Sie den Geschäftscode einmal, verpacken Sie ihn einmal, ändern Sie den Geschäftscode einmal, verpacken Sie ihn einmal neu, und jedes Paket ist 2 KB groß. Wenn wir die Codesegmentierung verwenden, verpacken Sie das Plug-In in ein js , Der Geschäftslogikcode wird in ein js gepackt. Jedes Mal, wenn der Geschäftslogikcode geändert wird, wird nur die Geschäftslogik js gepackt, was nur 1 KB entspricht, was die Zeit des Packens spart. Dies ist die Hauptbedeutung der Codeteilung.
Der Hauptansatz besteht darin, lodash separat zu verpacken
webpack.config.js:
entry: {
main: './src/main.js',
lodash: './src/lodash.js'
},output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}Ballen:
<!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>
In der Datei index.html werden zwei js-Dateien eingeführt
(2) Verwenden Sie das Webpack, um die Codeaufteilung zu konfigurieren
Fügen Sie zwei Codezeilen hinzu
optimization: {
usedExports: true,
// 代码分割
splitChunks: {
chunks: 'all'
}
},Nach dem Verpacken:
index.html:
main.269e60289818f70af114.js: Dieses js ist hauptsächlich Geschäftslogikcode
Hersteller ~ main.269e60289818f70af114.js: Diese Datei ist hauptsächlich der js-Erfassungscode des Plugins