面试题：Webpack Tree Shaking与ES6模块的关系及优化策略

Webpack Tree Shaking与ES6模块的紧密联系

ES6模块是Tree Shaking的基础：
- ES6模块采用静态导入导出方式，在编译时就能确定模块的依赖关系和导出内容。例如：
```
// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './utils.js';
```
- 这种静态结构使得Webpack等工具可以在打包时分析模块依赖，清楚知道哪些导出被使用，哪些未被使用，从而实现Tree Shaking。相比之下，CommonJS模块的动态导入（require在运行时确定导入）难以实现Tree Shaking。
Webpack利用ES6模块特性实现Tree Shaking：
- Webpack在处理ES6模块时，会构建依赖图，通过分析模块间的导入导出关系，标记未使用的导出。在打包阶段，Webpack会剔除未使用的代码，达到Tree Shaking的效果，减小打包体积。

在大型前端项目中优化Tree Shaking效果，提升打包性能的Webpack配置

使用生产模式：
- 在Webpack配置中，将mode设置为'production'。Webpack在生产模式下会默认开启一些优化，包括更有效的Tree Shaking。
```
module.exports = {
    mode: 'production'
};
```

优化optimization.minimize选项：

确保optimization.minimize为true（生产模式下默认为true），并且使用TerserPlugin（Webpack默认使用）。TerserPlugin可以进一步压缩代码，同时协助Tree Shaking移除未使用的代码。可以对TerserPlugin进行配置，例如：

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true, // 开启多线程压缩，加快压缩速度
                terserOptions: {
                    compress: {
                        drop_console: true // 移除console.log等调试代码
                    }
                }
            })
        ]
    }
};

配置module.noParse：
- 对于一些不需要解析依赖的库（如一些已经经过打包处理的库），可以使用module.noParse选项，让Webpack跳过对这些文件的依赖解析，提升打包速度。例如：
```
module.exports = {
    module: {
        noParse: /jquery\.min\.js/ // 跳过对jquery.min.js的依赖解析
    }
};
```

使用purgecss-webpack-plugin清理CSS：

在大型项目中，CSS也可能存在未使用的代码。purgecss - webpack - plugin可以分析HTML和JavaScript文件，移除未使用的CSS。首先安装该插件：npm install purgecss-webpack-plugin --save - dev。然后在Webpack配置中使用：

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const globAll = require('glob-all');

module.exports = {
    plugins: [
        new PurgeCSSPlugin({
            paths: globAll.sync(`${__dirname}/src/**/*`, {nodir: true}),
            safelist: function () {
                return {
                    standard: ['body - dark'] // 防止特定类名被移除
                };
            }
        })
    ]
};

确保正确的package.json配置：
- 在package.json中，确保sideEffects字段配置正确。如果一个模块没有副作用（不会影响其他模块的状态），可以将其设置为false，帮助Webpack更好地进行Tree Shaking。例如：
```
{
    "sideEffects": false
}
```
- 如果部分模块有副作用，可以设置为数组，列出有副作用的文件路径：
```
{
    "sideEffects": [
        "./src/styles.css",
        "./src/polyfills.js"
    ]
}
```

面试题：Webpack Tree Shaking与ES6模块的关系及优化策略

知识考点

面试题答案

Webpack Tree Shaking与ES6模块的紧密联系

在大型前端项目中优化Tree Shaking效果，提升打包性能的Webpack配置