面试题：Webpack 中如何优化 JavaScript 代码的打包体积

代码分割
- 方法阐述：将代码按照一定规则分割成多个文件，避免将所有代码打包到一个文件中，这样在页面加载时可以按需加载所需代码，减少初始加载的代码体积。
- Webpack配置：
  - 使用splitChunks插件。在webpack.config.js中配置如下：

module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

上述配置会将所有模块中的公共代码提取出来，生成单独的chunk文件。chunks属性值'all'表示对所有类型的chunk（initial、async等）都进行代码分割。

Tree - shaking
- 方法阐述：Tree - shaking是一种通过消除未使用的代码来优化打包体积的技术。它基于ES6模块的静态结构分析，能够识别出哪些模块没有被使用，从而在打包时将其排除。
- Webpack配置：
  - 确保项目使用ES6模块语法（.mjs或在package.json中设置"type": "module"）。
  - 在webpack.config.js中，默认情况下，Webpack在生产模式下会自动开启Tree - shaking。如果是开发模式，可安装@babel/plugin - transform - remove - unused - exports插件，并在.babelrc或babel.config.js中配置：

{
    "plugins": ["@babel/plugin - transform - remove - unused - exports"]
}

这样Babel在转译代码时会移除未使用的导出，配合Webpack实现Tree - shaking优化。

压缩代码
- 方法阐述：通过压缩工具去除代码中的空格、注释等冗余信息，缩短变量名等方式减小代码体积。
- Webpack配置：
  - 在生产模式下，Webpack默认使用terser - webpack - plugin进行代码压缩。若需要自定义配置，可在webpack.config.js中：

const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
    //...其他配置
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true, // 开启多线程压缩，加快压缩速度
                terserOptions: {
                    compress: {
                        drop_console: true // 移除console.log等调试语句
                    }
                }
            })
        ]
    }
};

上述配置中，parallel开启多线程压缩，drop_console会移除代码中的console.log语句，进一步减小代码体积。

使用CDN引入第三方库
- 方法阐述：将常用的第三方库通过CDN（内容分发网络）引入，而不是打包进项目中，从而减少项目自身的打包体积。
- Webpack配置：
  - 安装html - webpack - externals - plugin插件。
  - 在webpack.config.js中配置：

const HtmlWebpackExternalsPlugin = require('html - webpack - externals - plugin');
module.exports = {
    //...其他配置
    plugins: [
        new HtmlWebpackExternalsPlugin({
            externals: [
                {
                    module: 'lodash',
                    entry: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
                    global: '_'
                }
            ]
        })
    ]
};

上述配置表示引入CDN上的lodash库，在页面中可通过全局变量_访问，并且该库不会被打包进项目。

星途面试题库

面试题：Webpack 中如何优化 JavaScript 代码的打包体积

知识考点

面试题答案