随着前端技术的不断发展，前端项目服务越来越复杂，需要打包的文件也越来越多。这样会导致一个问题，就是打包后的文件都被放在一个文件中，这样会导致加载时间过长，用户体验不佳。为了解决这个问题，现在我们需要进行打包文件分离来优化前端加载速度。
为什么要进行打包文件分离
在前端开发中，我们开发的项目可能包含了很多页面或组件，而这些页面或组件都会引用很多不同的类库和资源文件。如果将所有文件都打包到一个文件中，这样会导致文件变得非常庞大，从而影响页面的加载速度，同时也会导致用户等待时间变长，从而降低用户体验。
这时候我们就需要将文件进行打包分离，将不同的类库和资源文件打包到不同的文件中，这样可以使得页面的加载速度更快，同时也可以提高用户体验。
如何进行打包文件分离
Webpack 是一款功能强大的打包工具，可以帮助我们实现打包文件分离的过程。下面我们将介绍如何通过配置 Webpack 实现打包文件分离。
入口配置
Webpack 打包文件的入口是 entry，我们需要对入口进行配置。在 entry 配置中，我们需要将一些依赖分成几个文件（比如第三方插件、公用代码等），这样可以将不同的资源打包到不同的文件中。
module.exports = {
entry: {
app: './src/index.js', // 入口文件
vendor: ['react', 'react-dom'] // 第三方插件
},
...
}在上面的配置中，app 是我们需要打包的入口文件，而 vendor 是我们需要打包的第三方插件。
输出配置
Webpack 打包文件的出口是 output，我们需要对出口进行配置。在 output 配置中，我们需要指定打包后的文件名和输出的路径。
module.exports = {
...
output: {
filename: '[name].bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 输出路径
},
...
}在上面的配置中，我们使用了 [name] 关键字来表示文件名，Webpack 会根据 entry 的配置来生成对应的文件名。
动态链接库
对于复杂的项目，我们可能会使用大量的第三方插件。这些插件会增加我们应用程序的大小，从而影响页面的加载速度。为了解决这个问题，我们可以将这些第三方插件单独打包成动态链接库，这样可以减小打包后的文件大小，同时也可以加快打包速度。
Webpack 提供了一个 DllPlugin 插件来实现动态链接库的打包。我们需要先创建一个 webpack.config.dll.js 配置文件来进行动态链接库的打包。在这个配置文件中，我们需要将所有需要打包的第三方插件列出来。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ---------------
--
-------- -
--- -------------------
----- ----------------
----- ----------------------- -----------------------
--
-
--在上面的配置中，我们使用了 [name]dll.js 作为输出文件名，同时使用了 [name][hash] 作为动态链接库的全局变量名，这样可以避免变量重名的问题。
在 webpack.config.js 配置文件中，我们需要使用到了一个 AddAssetHtmlPlugin 插件来将动态链接库插入到 HTML 中。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - -----------------------------------------
-------------- - -
-------- -
--- --------------------
--------- ----------------------- ---------------------
--
--
---
--在上面的配置中，我们使用了 AddAssetHtmlPlugin 插件来将动态链接库插入到 HTML 中，从而实现动态链接库的引用。
总结
打包文件分离是优化前端加载速度的常用技术之一，它可以将不同的类库和资源文件打包到不同的文件中，从而提高页面的加载速度，同时也可以提高用户体验。
在本文中，我们通过 Webpack 工具实现了打包文件分离的过程，包括入口配置、输出配置和动态链接库的打包等。如果你想优化你的前端项目加载速度，可以尝试使用这些技术实现打包文件分离。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ae5ef968c7c53b0682aaf