webpack 代码分离优化快速指北

当我们的代码越来越多，我们经常需要考虑如何进行代码分离，从而帮助我们提升应用程序的性能，减少加载时间。webpack 提供了多种代码分离的方式和方式的组合，可以在不同的场景中使用。下面是关于webpack代码分离优化快速指北的详细攻略：

1. 概述

webpack 中的代码分离是指将代码拆分成更小的块，以便于缓存、并行加载和延迟加载这些代码块。webpack 中的代码分离分为两种情况：

• 入口起点代码分离：通过 entry 配置手动地分离代码。

• 动态导入分离代码：通过模块间的内联函数调用动态分离代码。

2. 入口起点代码分离

使用 entry 配置手动地分离代码是 webpack 中最简单的一种方式。要实现该方法，需要将配置文件中的 entry 配置分离成多个入口配置。例如：

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在上述示例中，我们通过 entry 配置将 app.js 和 vendor.js 分离成两个入口文件。在输出中，webpack 将会生成两个分别对应 app.js 和 vendor.js 的输出文件。

3. 动态导入分离代码

动态导入是指通过内联函数调用来动态地导入代码块，从而实现代码分离。webpack 中通过 import() 语法实现了动态导入。下面是使用动态导入实现代码分离的示例：

async function getComponent() {
  const element = document.createElement('div');
  const { default: _ } = await import('lodash');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}

getComponent().then(component => {
  document.body.appendChild(component);
});

在上述示例中，我们使用了 import（）语法来动态导入 lodash，并在函数中使用该库中的方法。通过这种方式，我们可以将 lodash 库分离成一个独立的代码块，并在需要使用的时候动态导入。

4. 提取公共代码

随着应用程序越来越复杂，我们可能会发现多个代码块之间存在相同的代码。为了避免这些相同的代码重复出现在不同的代码块中，我们可以将它们提取到一个单独的代码块中。webpack 中提供了一种称为 CommonsChunkPlugin 的插件，用于实现公共代码提取。下面是一个使用 CommonsChunkPlugin 插件实现公共代码提取的示例：

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在上述示例中，我们使用 CommonsChunkPlugin 插件将共享的 vendor 代码提取到一个单独的代码块中，从而避免重复出现在 app 代码块和 vendor 代码块中。

在实际的开发中，还有很多其他的代码分离的方式和方式的组合可以使用，例如 SplitChunks 插件、Dynamic Imports 等，可以根据实际情况进行选择。