前言：Webpack 是一个强大的打包工具，可以将多个 JavaScript 模块打包成一个文件，但是随着项目的复杂度增加，打包出来的文件体积也会越来越大，影响页面的加载速度。本文将介绍如何优化 Webpack 打包后的文件大小，以提高页面的加载速度。
1. 代码分割
Webpack 提供了代码分割（code splitting）功能，可以将代码分割成多个小模块，按需加载，提高页面的加载速度。代码分割可以通过以下两种方式实现：
1.1. 动态导入
动态导入（Dynamic Import）是一种异步加载模块的方式，可以在需要的时候再加载模块。使用动态导入可以将代码分割成多个小模块，按需加载。
// 使用动态导入
import(/* webpackChunkName: "moduleA" */ './moduleA').then(moduleA => {
// 使用 moduleA
});
import(/* webpackChunkName: "moduleB" */ './moduleB').then(moduleB => {
// 使用 moduleB
});上面的代码中，import() 方法可以动态加载模块，webpackChunkName 参数指定打包后的文件名，可以将多个模块打包成一个文件。
1.2. 预编译模块
预编译模块（Precompiled Modules）是一种将常用的代码提取出来，打包成一个单独的文件，可以在多个页面中共享。使用预编译模块可以减少重复的代码，提高打包效率。
// 使用预编译模块
import { moduleA, moduleB } from './common';
// 使用 moduleA
// 使用 moduleB上面的代码中，common.js 文件中包含了常用的代码，可以在多个页面中共享。
2. 压缩代码
Webpack 提供了压缩代码的功能，可以将打包后的文件压缩成更小的体积，提高页面的加载速度。压缩代码可以通过以下两种方式实现：
2.1. 使用 UglifyJSPlugin 插件
UglifyJSPlugin 是一个 JavaScript 压缩工具，可以将 JavaScript 代码压缩成更小的体积。使用 UglifyJSPlugin 插件可以在 Webpack 打包时自动压缩代码。
// www.javascriptcn.com code example
// 使用 UglifyJSPlugin 插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
plugins: [
new UglifyJSPlugin(),
],
// ...
};上面的代码中，UglifyJSPlugin 插件可以在 Webpack 打包时自动压缩代码。
2.2. 使用 Tree Shaking
Tree Shaking 是一种将无用代码删除的技术，可以将打包后的文件体积减小。使用 Tree Shaking 可以将未使用的代码删除，减少打包后的文件体积。
// 使用 Tree Shaking
import { moduleA } from './moduleA';
// 使用 moduleA上面的代码中，只使用了 moduleA 模块，其他模块未被使用，可以通过 Tree Shaking 技术将未使用的模块删除。
3. 按需加载
按需加载（Lazy Loading）是一种异步加载模块的方式，可以在需要的时候再加载模块。使用按需加载可以将页面的初始化时间缩短，提高页面的加载速度。
// 使用按需加载
import(/* webpackChunkName: "moduleA" */ './moduleA').then(moduleA => {
// 使用 moduleA
});
import(/* webpackChunkName: "moduleB" */ './moduleB').then(moduleB => {
// 使用 moduleB
});上面的代码中，使用动态导入实现按需加载，可以将模块分割成多个小模块，按需加载。
结语
本文介绍了如何优化 Webpack 打包后的文件大小，以提高页面的加载速度。代码分割、压缩代码、按需加载等技术可以帮助我们优化页面的加载速度，提高用户体验。在实际项目中，我们可以结合具体的需求，选择合适的技术来优化页面的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38a32a941bf71346bd577