Webpack解析动态导入import()语法
- 语法识别：Webpack在解析模块代码时，当遇到
import()语法，会识别这是一个动态导入的指令。它不同于静态导入（import ... from ...），静态导入是在编译时确定依赖关系，而动态导入是在运行时按需加载模块。
- 生成代码：Webpack会将
import()语法转换为符合ES2020动态导入规范的代码。例如，将import('./MyComponent.vue')转换为能够在运行时动态加载模块的代码结构。在生成的代码中，会包含一个用于加载模块的函数，通常基于Promise实现。
代码分割原理
- Chunks划分：Webpack将整个项目的代码分割成多个
chunk。当遇到import()时，Webpack会为这个动态导入的模块创建一个新的chunk。每个chunk可以包含一个或多个模块，并且可以独立于其他chunk进行加载。
- 优化策略：Webpack使用各种算法来优化
chunk的划分。例如，它会尽量将共享模块提取到单独的chunk中，以避免重复加载。同时，对于异步chunk，Webpack会根据模块之间的依赖关系和使用频率来合理安排chunk的大小和加载顺序。
按需加载原理
- 运行时触发：当代码执行到
import()语句时，才会触发模块的加载。这意味着只有在需要使用某个模块时，才会从服务器请求该模块的代码。
- HTTP请求：Webpack会将每个异步
chunk打包成一个单独的文件。在运行时，浏览器会根据import()返回的Promise，发起HTTP请求获取对应的chunk文件。一旦请求成功，Promise被 resolve，模块代码被加载并执行，从而实现按需加载。
优化异步组件加载性能的关键配置项
splitChunks：
- 原因：
splitChunks可以将公共模块（如第三方库）提取到单独的chunk中，避免在每个异步chunk中重复包含。这减少了每个异步chunk的大小，加快了加载速度。同时，可以根据模块的使用频率和大小等条件，灵活配置如何分割chunk，进一步优化加载性能。
- 示例：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
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
}
}
}
}
};
output.chunkFilename：
- 原因：通过设置
chunkFilename可以控制异步chunk文件的命名规则和输出路径。合理命名可以提高缓存命中率，例如在文件名中包含哈希值，当文件内容变化时哈希值改变，避免缓存污染。同时，合理的输出路径结构有助于服务器端的资源管理和优化。
- 示例：
module.exports = {
output: {
chunkFilename: 'js/[name].[contenthash].chunk.js'
}
};
module.rules中的babel-loader配置：
- 原因：在处理Vue异步组件的代码时，
babel-loader用于将ES6+代码转换为兼容旧浏览器的代码。优化babel-loader配置，如合理设置presets和plugins，可以减少转换后的代码体积，提高加载性能。例如，使用@babel/preset-env并配置useBuiltIns: 'usage'，可以根据项目实际使用的特性引入相应的polyfill，避免不必要的代码冗余。
- 示例：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3
}
]
]
}
}
}
]
}
};
optimization.minimize及相关压缩插件配置：
- 原因：启用代码压缩（
optimization.minimize: true）可以显著减少异步chunk文件的大小，从而加快加载速度。同时，合理配置压缩插件（如terser-webpack-plugin）的参数，如启用并行压缩、设置压缩级别等，可以在保证压缩效果的同时，提高压缩效率。
- 示例：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
compress: {
drop_console: true // 移除console.log
}
}
})
]
}
};
