Webpack 实战：Code Splitting 优化页面加载性能

2025年11月4日 125点热度 1人点赞 1条评论

一、前言

在现代前端开发中，随着业务复杂度的增长，单页应用（SPA）的打包体积往往不断膨胀。一次性加载所有脚本资源，不仅浪费带宽，还显著拖慢首屏加载速度。

常见问题包括：

vendor.js 文件过于庞大；
所有页面模块在首屏同时加载；
第三方依赖（如 ElementUI、lodash）体积巨大且不可拆分；
浏览器缓存利用率低。

为了解决这些问题，Webpack 提供了强大的 Code Splitting（代码分割） 功能，使我们能够将代码按需加载，从而显著提升加载速度与性能。

二、理解 Code Splitting：三种典型方式

Webpack 的代码分割机制主要包括以下三类：

类型	实现方式	适用场景
入口分割（Entry Points）	多入口配置	多页应用（MPA）
动态导入（Dynamic Imports）	`import()` 按需加载	SPA 路由懒加载
公共模块抽取（SplitChunks）	提取重复依赖	共享第三方库资源

下面以 Vue + ElementUI 项目 为例，通过动态导入和 SplitChunks 优化配置，展示如何在实际工程中落地这些策略。

三、ElementUI 按需引入与基础配置

1. 安装依赖

Bash

npm install element-ui lodash-es --save

npm install element-ui lodash-es --save

2. Webpack 基础配置

JavaScript

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: '[name].[contenthash].js',
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: '[name].[contenthash].js',
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

3. 按需引入 ElementUI 组件

完整引入 ElementUI 会导致打包体积飙升。通过按需加载可显著减小体积：

JavaScript

// src/plugins/element.js
import Vue from 'vue';
import { Button, Dialog, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button);
Vue.use(Dialog);
Vue.prototype.$message = Message;

// src/plugins/element.js
import Vue from 'vue';
import { Button, Dialog, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button);
Vue.use(Dialog);
Vue.prototype.$message = Message;

在入口文件中引入：

JavaScript

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './plugins/element';

new Vue({
  render: h => h(App)
}).$mount('#app');

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './plugins/element';

new Vue({
  render: h => h(App)
}).$mount('#app');

这样只会打包实际使用的组件，减少无效依赖。

四、动态加载路由组件（Code Splitting 实战）

通过动态 import() 实现路由懒加载，Webpack 会自动将各页面生成独立的 chunk 文件：

JavaScript

// src/router/index.js
export default [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
  },
];

// src/router/index.js
export default [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
  },
];

生成的打包文件示例：

home.[hash].js
about.[hash].js
vendors.[hash].js

访问不同页面时，Webpack 会按需加载对应模块，从而显著减少首屏加载体积。

五、使用 lodash-es + Tree Shaking 优化第三方依赖

1. 问题：传统 lodash 无法被 Tree Shaking 优化

默认的 lodash 使用 CommonJS 格式导出（require()），Webpack 无法对其进行有效的 Tree Shaking，导致整个 lodash 被完整打包。

2. 解决方案：替换为 lodash-es（ESM 模块版本）

Bash

npm install lodash-es --save

npm install lodash-es --save

改用 ES 模块语法导入：

JavaScript

import { cloneDeep, debounce } from 'lodash-es';

const obj = { a: 1 };
const newObj = cloneDeep(obj);

import { cloneDeep, debounce } from 'lodash-es';

const obj = { a: 1 };
const newObj = cloneDeep(obj);

Webpack5 能够识别 lodash-es 的 ESM 结构，只打包实际使用的函数，大幅降低依赖体积。

3. 进一步优化：使用 SplitChunks 提取第三方库

通过 cacheGroups 配置将不同依赖打包为独立模块，提升缓存利用率：

JavaScript

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: -10,
      },
      elementUI: {
        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
        name: 'element-ui',
        chunks: 'all',
        priority: 20,
      },
      lodash: {
        test: /[\\/]node_modules[\\/]lodash-es[\\/]/,
        name: 'lodash-es',
        chunks: 'all',
        priority: 15,
      },
    },
  },
},

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: -10,
      },
      elementUI: {
        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
        name: 'element-ui',
        chunks: 'all',
        priority: 20,
      },
      lodash: {
        test: /[\\/]node_modules[\\/]lodash-es[\\/]/,
        name: 'lodash-es',
        chunks: 'all',
        priority: 15,
      },
    },
  },
},