webpack 优化构建性能全解析

🎯 引言

学会这篇文章后，你将掌握如何利用 webpack 的核心优化技巧，让你的前端项目构建更快、代码更小、加载更智能。无论是代码分割、懒加载，还是去除无用代码和缓存优化，这些都是提升用户体验和开发效率的重要利器。

🧩 代码分割（Code Splitting）

代码分割是 webpack 最强大的性能优化手段之一。通过把代码拆分成多个块(chunk)，浏览器可以按需加载，提高页面初次加载速度，降低加载压力。

为什么要做代码分割？想象一个购物网站，如果一次性加载所有产品详情和功能代码，初次访问时会非常慢。用代码分割，首页只加载必要代码，用户点击某个产品时，才加载该产品详情相关代码，这样体验更顺畅。

webpack 默认支持三种代码分割方式：

• 入口点分割：在配置多个 entry 时，webpack 会为每个入口生成独立的 bundle。
• 防止重复代码（CommonsChunkPlugin 已废弃，推荐 SplitChunksPlugin）：将多个入口共享的依赖提取出来。
• 动态导入（动态 import）：基于 ES 提案的 import() 动态加载模块，最灵活的分割方式。

示例：

// 动态导入示例
function loadComponent() {
    import('./MyComponent').then(({ default: MyComponent }) => {
        // 使用加载的组件
        MyComponent.render();
    });
}

这段代码告诉 webpack：MyComponent 是个单独的代码块，只有执行到这里才会加载它。

🕹️ 懒加载和按需加载

懒加载是结合代码分割的思想，让代码或资源在真正需要时才加载，避免一次性加载所有内容导致卡顿。

按需加载通常和路由结合，比如基于 Vue Router，配置路由组件懒加载：

// 路由配置（懒加载）
const routes = [
    {
        path: '/',
        component: () => import('./components/Home.vue'), // 懒加载
    },
    {
        path: '/about',
        component: () => import('./components/About.vue'), // 懒加载
    },
];

const router = new VueRouter({
    mode: 'history',
    routes,
});

这样只有用户访问到对应路径时，才会触发对应组件代码的加载。

懒加载也适用于图片、数据等资源：

<img loading="lazy" src="big-photo.jpg" alt="大图" />

这个 loading="lazy" 是现代浏览器支持的懒加载属性，延迟加载图片，节省流量。

🌳 Tree Shaking（去除无用代码）

Tree Shaking 是 webpack 利用 ES6 模块静态结构，自动剔除未被使用的代码，减小打包体积。

举个生活中的例子：你买菜时只买你需要的菜，不买超市里所有的食材。Tree Shaking 就像帮你剔除没用到的食材。

要启用 Tree Shaking，确保：

• 使用 ES6 的 import 和 export，CommonJS 的 require 不支持 Tree Shaking。
• webpack 在生产模式（mode: 'production'）下默认开启。
• package.json 里设置 "sideEffects": false，告诉 webpack 代码无副作用，可以安全移除未使用代码。

示例：

export function useful() {
    console.log('用得上的函数');
}
export function unused() {
    console.log('没用到的函数');
}

import { useful } from './utils';

useful();

打包后，unused 函数会被自动剔除。

💾 缓存优化（ContentHash）

构建优化不能忽视缓存策略。合理的缓存利用可以避免用户重复下载未变动的资源，提升加载效率。

webpack 提供了 contenthash 占位符，把文件内容的哈希值放到文件名里。只有内容改变时文件名才变，浏览器才会重新下载。

配置示例：

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
};

这样生成的文件名类似：

main.1a2b3c4d.js
vendor.5d6e7f8g.js

当你修改了代码，哈希会变化，浏览器更新对应文件，没修改的文件则直接用缓存。

结合代码分割，你还能更细粒度控制缓存：

• 抽取第三方库为独立 chunk
• 抽取公共代码为公共 chunk

示例配置：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        runtimeChunk: {
            name: 'runtime',
        },
    },
};

这样保证了 vendor、runtime、业务代码独立缓存。

🧾 小节总结

• 代码分割能拆小包，减少首屏加载压力，提升性能。
• 懒加载帮你只在需要时加载资源，避免冗余流量。
• Tree Shaking 自动去除没用代码，减小包体积。
• 使用 ContentHash 配置合理缓存，避免用户重复下载未变文件。

❓ 知识问答

Q：webpack 代码分割和懒加载有什么区别？

A：代码分割是把代码拆分成多个块，懒加载是按需加载这些块，懒加载是代码分割的一种用法。

Q：Tree Shaking 是否支持所有模块类型？

A：只支持 ES6 模块（import/export），CommonJS 模块不支持 Tree Shaking。

🧪 小练习

练习 1

配置 webpack 输出文件名使用 contenthash，并通过 SplitChunksPlugin 抽取公共代码。

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        // TODO: 这里配置 contenthash
    },
    optimization: {
        // TODO: 开启拆包
    },
};

🎉 恭喜你已经掌握 webpack 的代码分割、懒加载、Tree Shaking 和缓存优化技能啦！这些都是构建高性能前端应用的必备利器，赶紧回去试试吧！