在前端开发过程中，Web 应用的性能优化是一个不可忽视的问题。在网页加载时，HTTP 请求会占用大量的时间，因此减少 HTTP 请求数量是一种常见的优化方式。在使用 Webpack 打包项目时，我们可以采取一些技术手段来减少 HTTP 请求数量，从而达到优化的目的。
使用 splitChunks 减少重复依赖
在我们的应用中，可能会存在多个页面都引用同一个库（如 jQuery），这时候我们就需要在多个页面之间共享该库的代码。Webpack 中有一个优化选项 splitChunks，可以把多个入口文件间共享的代码分离出来，生成单独的 chunk，从而避免多次加载相同代码的情况。
在 Webpack 的配置文件中，使用 optimization.splitChunks 可以开启该优化功能。默认情况下，Webpack 会根据一些策略，自动将代码切割成多个 chunk，但我们也可以手动配置该选项。
// www.javascriptcn.com code example
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: "all",
minSize: 20000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all"
}
}
}
}
};在上述代码中，我们将 chunk 的选项配置为 all，表示对所有 chunk 均应用该优化策略。而 cacheGroups 选项可以用来配置分离出来的 chunk 的命名、优先级等信息。在上述代码中，我们将所有位于 node_modules 目录下的文件都打包到一个名为 vendors 的 chunk 中。
使用动态导入按需加载模块
除了把多个入口文件间共享的代码分离为单独的 chunk 之外，Webpack 还提供了另一种优化方式：动态导入。动态导入是指在应用运行过程中，根据需要动态地加载某个模块。
使用动态导入可以有效地减少应用的初始载入时间，从而提高用户体验。例如，在一个网站中有一个页面需要加载大量的 JavaScript 代码，此时我们可以先只加载页面的部分内容，然后在用户需要使用该部分时，再动态地加载其余代码。
在使用 Webpack 实现动态导入时，我们可以使用 ES6 的 import() 语法。下面是一个示例代码：
async function loadComponent() {
const module = await import(/* webpackChunkName: "my-chunk-name" */ './myComponent.js');
return module.default;
}
loadComponent().then(component => {
// ...
});在上述代码中，我们使用 import() 动态地加载名为 myComponent.js 的模块，并将其 default 导出的值返回给调用者。需要注意的是，在使用 import() 时，需要手动配置 Webpack 的 output.chunkFilename 选项。
使用 tree shaking 剔除未使用的代码
最后一个优化方式是使用 tree shaking。tree shaking 是指将代码中未使用的部分剔除，从而减少代码的体积。在使用 Webpack 时，我们可以通过设置 mode: production 来自动开启该优化功能。同时，我们还需要在 package.json 文件中配置 "sideEffects": false，以告诉 Webpack 所有模块都是“严格纯粹”的模块，即不包含副作用。
// www.javascriptcn.com code example
{
"name": "my-project",
"version": "1.0.0",
"description": "My project",
"sideEffects": false,
"dependencies": {
// ...
}
}需要注意的是，只有在使用 ES6 模块语法时，才能充分利用 tree shaking 的优化效果。
以上是三种常见的 Webpack 打包优化方式。在实际项目中，应根据具体情况采取合适的优化措施，以提高应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6aad0a941bf7134c73bd6