多文件中require/import是否影响Webpack打包体积？冗余导入能否被优化？

嘿，这个问题问到点子上了，刚好是Webpack打包优化里的核心点之一，我来给你掰扯清楚：

一、多个文件使用require/import会影响打包体积吗？ #

答案是：正常导入需要的内容时，不会因为重复导入而增大体积。

Webpack在打包时会做模块依赖分析，同一个模块不管被你在多少个文件里通过import或require引入，最终只会被打包一次。举个例子：你在10个组件里都写了import React from 'react'，打包后的产物里React的代码只会出现一份，不会重复打包10次。

当然，如果是不同的模块，那Webpack会把所有被依赖到的模块都打包进去——这是合理的，毕竟你确实用到了这些模块的内容。

二、导入了不需要的内容，Webpack能自动优化剔除吗？ #

这个得分情况看，核心取决于你用的模块规范和Webpack的配置：

1. ES模块（import/export）+ Production模式：Tree Shaking会帮你剔除无用代码 #

Webpack对ES模块有静态分析能力，在production模式下会自动开启Tree Shaking功能——简单说就是把你导入但从未使用的代码从打包产物里删掉。

比如你写了：

// utils.js
export const a = 1;
export const b = 2;

// index.js
import { a } from './utils';
console.log(a);

打包后，b的代码会被完全剔除，不会出现在最终产物里。

不过有个小前提：如果导入的模块有副作用（比如修改全局变量、执行DOM操作、导入样式文件），Webpack默认不会剔除这些代码，因为它不确定副作用会不会影响你的应用。这时候可以在模块的package.json里添加"sideEffects": false（或者指定有副作用的文件路径），告诉Webpack这个模块没有副作用，Tree Shaking就能更彻底地工作。

2. CommonJS模块（require）：很难自动剔除无用代码 #

CommonJS是动态模块规范，require的行为没法被Webpack静态分析。比如你写了：

// utils.js
module.exports = {
  a: 1,
  b: 2
};

// index.js
const utils = require('./utils');
console.log(utils.a);

Webpack没法确定你后续会不会用到utils.b，所以会把整个utils模块都打包进去，没法自动剔除b的代码。

3. 第三方库的按需导入技巧 #

如果你用的是像Lodash这样的大型库，别直接导入整个库：

// 不好的写法：会打包整个Lodash
import _ from 'lodash';

改成按需导入（如果库支持ES模块的话）：

// 好的写法：只打包debounce相关代码
import { debounce } from 'lodash-es';

这样能大幅减少打包体积。

内容的提问来源于stack exchange，提问作者Jeff T