Adding analysis Tools
To see packaging changes in real time, you can use a package analysis tool. Webpack – bundle – analyzer installation
npm i webpack-bundle-analyzer --save-dev
Copy the codeAdd commands to package.json
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
Copy the codeWebpack configuration
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [new BundleAnalyzerPlugin()],
Copy the codeperform
npm npm run analyz
Copy the codeAfter the tool is configured
First take a look at the default packaging configuration for WebPack
module.exports = {
optimization: {
splitChunks: {
chunks: 'async'.minSize: 30000.minChunks: 1.maxAsyncRequests: 5.maxInitialRequests: 3.automaticNameDelimiter: '~'.name: true.cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/.priority: - 10
},
default: {
minChunks: 2.priority: - 20.reuseExistingChunk: true}}}}};Copy the codeParse the parameters
- Chunk: indicates the scope of the split module. It has three values async, INITIAL, and all.
Async: splits only from asynchronously loaded modules (dynamically loaded import()) initial: splits only from entry modules all: includes both
- MinSize: indicates the minimum size of a split component
- MinChunks: minimum number of references
- MaxAsyncRequests: Limits the maximum number of parallel requests within asynchronous modules
- MaxInitialRequests: Maximum number of requests allowed for entry parallel loading
- AutomaticNameDelimiter: the connector of the file name
- Name: Split chunks name
- CacheGroups: cache group
The default is vendors and default. You can set the weight value priority.
Vendor typically places files in node_modules, and default places public components
Adding a Module identifier
We need to add a few more files to test, but here’s the problem: if I create a btest file, then an atest file, and package it, I find that the hash of the btest file also changes. This is because the files are sorted by asCall code when WebPack builds dependencies, and then the newly inserted files change. The solution is to add an identifier to the module’s name. So when you pack, you follow the label. Configuration is as follows
optimization: {
namedChunks:true.// Add the module id
splitChunks: {
/ / configuration}},plugins: [
new webpack.HashedModuleIdsPlugin(), NamedModulePlugin is recommended for development environments].Copy the codeThen package, find the problem solved, and then return to our packaging scheme analysis.
Packaging analysis
There are several options for packaging now. 1. Node – Modules and public components (such as Loading) that are referenced more than twice are packed into the base file.
The WebPack configuration is as follows
optimization: {
splitChunks: {
cacheGroups: {
base: {chunks: 'initial'.//initial: extracts the public part of the entry file
minChunks: 2.// Indicates the minimum number of files to extract the public part
minSize: 0.// Represents the smallest size to extract the common part
name: 'base' // Name the extracted file}}}},Copy the codeThe results of packaging analysis are as follows
<template> <div> atest </div> </template> <script> import Loading from '.. / / into/components/loading/loading 'loading components export default {} < / script >Copy the codePackaging again
2. Separate packaging, node_modules is packaged separately, and each imported component is packaged into a file. The WebPack configuration is as follows
optimization: {
namedChunks:true.splitChunks: {
chunks: 'all'.minSize: 0.minChunks: 1.maxAsyncRequests: 10.maxInitialRequests: 10.// automaticNameDelimiter: '~',
name: true.cacheGroups: {
vendors: {
minChunks: 1.test: /[\\/]node_modules[\\/]/.priority: - 10 / / weight
},
default: {
minChunks: 1.priority: - 20./ / weight
reuseExistingChunk: true}}}},Copy the codeSet up two cache groups, vendors being the old files packed with node_Modules, and vendors adding atest files and btest file packaging analysis
<div> atest </div> </template> <script> import myCom from '.. /components/testCom/testCom' export default { } </script>Copy the codePackaging analysis
Vendors: {minChunks: 1, vendors: /[\\/]node_modules[\\/]/, priority: -10, vendors: {priority: 0,}, base: {priority: -20, // weight: 'initial', //initial: minChunks: 1, // minimum number of chunks: minSize: 0, // minimum size of chunks: name: '}Copy the codeLet’s take a look at the packing result
3. All components are packaged separately, node_modules is packaged separately.
On the first code
vendors: {
name:'vendors'.minChunks: 1.test: /[\\/]node_modules[\\/]/.priority: - 10./ / weight
minSize: 0,},default: {test:/[\\/]components[\\/]|[\\/]common[\\/]/.priority:- 20./ / weight
name(module) {// console.log(' module analysis print ')
// console.log(module.identifier())
const moduleFileName = module
.identifier()
.split('/')
.pop()
.replace('.js'.' ')
return `${moduleFileName}`}},Copy the codeComponents is where I put my public components, and common is where I put my public JS methods. I just need to filter them and the following import package results are as follows
<template> <div> atest </div> </template> <script> import myCom from '.. /components/testCom/testCom' import '.. /common/widget/common' export default { } </script>Copy the codeLooking at the packing results
The advantage of this comparison is that when you change the content of only one component, the entire base changes. This disadvantage will become more and more obvious as the base file grows larger ️
code
1. Node — Modules and public components (such as Loading) that reference more than two times are packed into the base file.
optimization: {
namedChunks: true.splitChunks: {
chunks: 'all'.minSize: 0.minChunks: 1.maxAsyncRequests: 100.maxInitialRequests: 100.automaticNameDelimiter: '~'.name: true.cacheGroups: {
base: {
minChunks: 1.// Indicates the minimum number of files to extract the public part
minSize: 0.// Represents the smallest size to extract the common part
name: 'base' // Name the extracted file}}}Copy the code2. Separate packaging, node_modules is packaged separately, and each imported component is packaged separately.
optimization: {
namedChunks: true.splitChunks: {
chunks: 'all'.minSize: 0.minChunks: 1.maxAsyncRequests: 100.maxInitialRequests: 100.automaticNameDelimiter: '~'.name: true.cacheGroups: {
vendors: {
minChunks: 1.test: /[\\/]node_modules[\\/]/.priority: - 10./ / weight
minSize: 0,},base: {
priority: - 20./ / weight
chunks: 'initial'.//initial: extracts the public part of the entry file
minChunks: 1.// Indicates the minimum number of files to extract the public part
minSize: 0.// Represents the smallest size to extract the common part
name: 'base' // Name the extracted file}}}Copy the code3. All components are packaged separately, node_modules is packaged separately.
optimization: {
namedChunks: true.splitChunks: {
chunks: 'all'.minSize: 0.minChunks: 1.maxAsyncRequests: 100.maxInitialRequests: 100.automaticNameDelimiter: '~'.name: true.cacheGroups: {
vendors: {
name:'vendors'.minChunks: 1.test: /[\\/]node_modules[\\/]/.priority: - 10./ / weight
minSize: 0,},default: {test:/[\\/]components[\\/]|[\\/]common[\\/]/.priority:- 20./ / weight
name(module) {// console.log(' module analysis print ')
// console.log(module.identifier())
const moduleFileName = module
.identifier()
.split('/')
.pop()
.replace('.js'.' ')
return `${moduleFileName}`}}}}Copy the code