面试题：Webpack中如何实现代码分离与懒加载的初步结合

安装相关插件
- Webpack 本身支持代码分离和懒加载，通常不需要额外安装特殊插件，但@babel/plugin-syntax-dynamic-import插件有助于处理动态导入语法（如果项目使用 Babel）。可以通过npm install --save-dev @babel/plugin-syntax-dynamic-import安装。
Webpack 配置（以 webpack.config.js 为例）
- 入口(entry)：对于多页面应用，配置多个入口点。例如：

module.exports = {
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js'
    },
    //...其他配置
};

输出(output)：指定输出路径和文件名等。

module.exports = {
    //...
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    //...其他配置
};

优化(optimization)：使用splitChunks进行代码分割。

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

这里`chunks: 'all'`表示对所有类型的 chunk 都进行代码分割，Webpack 会自动将一些公共模块提取出来，形成单独的 chunk。

3. 在代码中实现懒加载

在页面的 JavaScript 文件中，使用动态导入（Dynamic Imports）语法来实现懒加载。例如在page1.js中：

// 懒加载一个非首屏必需的模块
const loadNonEssentialModule = async () => {
    const { nonEssentialFunction } = await import('./nonEssentialModule.js');
    nonEssentialFunction();
};

// 可以在某个事件触发时调用懒加载函数
document.getElementById('loadButton').addEventListener('click', loadNonEssentialModule);

上述代码中，import('./nonEssentialModule.js')是动态导入语法，Webpack 会将nonEssentialModule.js分离成单独的 chunk，并在loadNonEssentialModule函数被调用时才加载该模块。

HTML 模板（如果使用 HTMLWebpackPlugin）
- 如果项目使用html - webpack - plugin来生成 HTML 文件，确保生成的 HTML 文件能够正确引用分离后的 JavaScript 文件。例如：

const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
    //...
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/page1.html',
            filename: 'page1.html',
            chunks: ['page1']
        }),
        new HtmlWebpackPlugin({
            template: './src/page2.html',
            filename: 'page2.html',
            chunks: ['page2']
        })
    ]
    //...其他配置
};

这样生成的 HTML 文件会只引入对应页面所需的 JavaScript 模块，实现代码分离与懒加载的结合。

星途面试题库

面试题：Webpack中如何实现代码分离与懒加载的初步结合

知识考点

面试题答案