在前端开发中，Webpack 是一个非常重要的工具，可以帮助我们进行模块化开发、打包和优化代码。在大型项目中，代码分离是一项非常重要的优化策略，可以显著地减少打包后的文件大小，提高页面加载速度。本文将介绍如何使用 Webpack 进行代码分离，以及如何进行打包优化。
什么是代码分离？
代码分离是指将应用程序或网站中的代码拆分成多个文件，以便在需要时按需加载。这样可以减少打包后的文件大小，从而提高页面加载速度。常见的代码分离方法有以下几种：
- 入口起点：使用 entry 配置手动地分离代码。
- 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。
- 动态导入：通过模块的内联函数调用来分离代码。
使用入口起点进行代码分离
entry 配置可以用来手动地分离代码。我们可以将一些公共的代码和第三方库分离到一个单独的文件中，以便在需要时按需加载。
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- --------- ------------
--
------- -
--------- -----------------------
-
--上面的配置中，我们将应用程序的入口文件 app.js 和第三方库 react 和 react-dom 分别作为两个入口起点。Webpack 会将这两个入口起点分别打包成两个文件，其中 vendor 文件包含了 react 和 react-dom 两个库。这样，在应用程序中需要使用这两个库时，我们可以通过按需加载的方式来加载 vendor 文件。
使用 SplitChunksPlugin 进行代码分离
SplitChunksPlugin 是 Webpack 4 中推出的一个新插件，可以用来去重和分离 chunk。我们可以将公共的模块和第三方库分离到一个单独的文件中，以便在需要时按需加载。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
name: 'common'
}
}
};上面的配置中，我们通过 optimization.splitChunks 配置来启用 SplitChunksPlugin 插件。chunks 参数指定了需要分离的 chunk 类型，all 表示所有类型的 chunk 都会被分离。name 参数指定了分离出来的文件名，这里我们将其命名为 common。
使用动态导入进行代码分离
动态导入是一种新的代码分离方法，它可以通过模块的内联函数调用来分离代码。这种方法可以使我们更加精确地控制代码的分离，从而提高页面加载速度。
import('./module').then(module => {
// 使用 module
});上面的代码中，我们使用 import() 函数来加载一个模块。这个函数返回一个 Promise，当模块加载完成后，我们可以在 then 回调函数中使用这个模块。Webpack 会将这个模块单独打包成一个文件，并在需要时按需加载。
打包优化
除了代码分离之外，我们还可以进行一些其他的打包优化，以进一步提高页面加载速度。
使用 Tree Shaking 去除无用代码
Tree Shaking 是一种新的打包优化策略，可以去除无用的代码，从而减少打包后的文件大小。我们可以通过配置 optimization.usedExports 来启用 Tree Shaking。
module.exports = {
optimization: {
usedExports: true
}
};上面的配置中，我们通过 optimization.usedExports 配置来启用 Tree Shaking。
使用缓存提高打包速度
Webpack 会自动缓存已经打包过的模块，以便在下一次打包时可以快速地进行增量打包。我们可以通过配置 cacheDirectory 来指定缓存目录。
-- -------------------- ---- -------
-------------- - -
------- -
------ --
----- --------
---- -
------- ---------------
-------- -
--------------- ----
-
-
--
-
--上面的配置中，我们通过 babel-loader 的 options.cacheDirectory 配置来指定缓存目录。
结论
代码分离是一项非常重要的优化策略，可以显著地减少打包后的文件大小，提高页面加载速度。在使用 Webpack 进行代码分离时，我们可以使用入口起点、SplitChunksPlugin 和动态导入等方法。除了代码分离之外，我们还可以进行一些其他的打包优化，如使用 Tree Shaking 去除无用代码和使用缓存提高打包速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673a4f0f026c11b6ae288e4b