Webpack 是前端开发中非常重要的工具，可以帮助我们在开发过程中快速打包、构建和优化代码，提升应用的性能和效率。本文将介绍使用 Webpack 进行打包优化的 10 个关键技巧，希望能帮助大家更好的理解和使用 Webpack。
技巧一：使用 Tree Shaking 优化代码
Tree Shaking 是一种通过从应用程序中删除未使用的代码来减少 bundle 大小的技术。使用 Tree Shaking 可以减少应用的加载时间和占用空间，同时提高网站的性能和效率。
// src/app.js
import { add, subtract } from './math'
console.log(add(1, 2))-- -------------------- ---- ------- -- ----------- ------ -------- ------ -- - ------ - - - - ------ -------- ----------- -- - ------ - - - - ------ -------- ----------- -- - ------ - - - - ------ -------- --------- -- - ------ - - - -
在上面的代码中，我们只使用了 add 函数，但是其他三个函数也被打包到了输出文件中。为了处理这个问题，我们可以使用 Tree Shaking 技术。
在 webpack 配置文件中，我们可以通过设置 mode 选项为 production 启用 Tree Shaking：
// webpack.prod.js
module.exports = {
mode: 'production',
// 其他配置项
}在开启 Tree Shaking 后，我们需要使用 ES6 模块语法并导出不同类型的函数：
// src/math.js export const add = (a, b) => a + b export const subtract = (a, b) => a - b export const multiply = (a, b) => a * b export const divide = (a, b) => a / b
现在，如果我们再次运行 webpack，我们将只看到 add 函数打包到输出文件中，其他函数将被删除。
技巧二：使用 Code Splitting 进行组件优化
Code Splitting 可以将应用程序拆分成更小的代码块，使其更容易进行浏览器缓存和同时加载。使用 Code Splitting 可以大大提高应用程序的性能，缩短加载时间。
// src/index.js
import('./app').then(({ default: App }) => {
const app = new App()
document.body.appendChild(app.render())
})使用上面的代码，我们可以将 app.js 拆分为单独的块，并在运行时动态加载它。这使得我们可以根据需要及时加载组件，而不是尝试一次加载整个应用程序。
技巧三：使用 Webpack DevServer 加快开发速度
Webpack DevServer 是 Webpack 提供的一个开发服务器，可以自动重新加载页面，以使代码更改生效。可以使用 DevServer 实时监视代码变化，并重新加载浏览器中的应用程序。
将 DevServer 配置以使用 HMR（热更新）功能，并监听端口 8080：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- -----
---------- -
----- -----
---- -----
-- -----
--
-现在，任何更改都会自动地重新加载浏览器，并且不会影响您的代码。
技巧四：使用 Bundle 分析工具来识别代码中的瓶颈
在打包后的代码中，有些模块可能会影响代码的性能和效率。通过使用 Bundle 分析工具，我们可以更好地了解可能影响代码性能和效率的模块。
要将 Bundle 分析器添加到应用程序中，我们需要先安装包，然后在 webpack 配置文件中添加插件：
npm install --save-dev webpack-bundle-analyzer
-- -------------------- ---- -------
-- -----------------
----- - -------------------- - - ----------------------------------
-------------- - -
-- -----
-------- -
--- ----------------------
--
-启动 webpack 执行打包操作，然后在浏览器中打开 http://localhost:8888 审查程序。您应该能看到应用程序中的所有包，并为它们提供有关大小、类型和性能的详细信息。
技巧五：使用缓存提高打包速度
打包大型应用程序时，Webpack 可能会花费较长时间，因此缓存是提高打包速度的另一种方法。使用缓存，Webpack 会缓存已加载的文件，以便更快地重新构建应用程序。
要启用 Webpack 缓存，请在配置文件中使用 cache 选项：
// webpack.config.js
module.exports = {
cache: true,
// 其他配置项
}现在，Webpack 将会在缓存中存储模块，以便更快地重新构建应用程序。
技巧六：使用 DLLPlugin 优化代码打包
DllPlugin 是 Webpack 的插件之一，可以将第三方库代码打包到单独的文件中，从而加快构建速度。通常情况下，我们不需要每次重新打包第三方库，因此将其作为单独的包是非常有利的。
首先，我们需要在配置文件中使用 DllPlugin 插件：
-- -------------------- ---- -------
-- -----------------
----- - --------- - - ------------------
-------------- - -
-------- -
--- -----------
----- -------------
----- -------------------- ------------------------
---
--
-- -----
-使用上面的配置，我们可以在 dll 目录下生成 vendor.dll 文件和 vendor-manifest.json 文件。现在我们可以在 webpack 配置文件中引入这些文件：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- -----
-------- -
--- ----------------------------
--------- ------------------------------- -------------------------
---
--
-现在，我们将第三方库从主包中移除，并将其作为单独的文件，从而加速打包速度。
技巧七：使用 Prepack 进一步优化代码
Prepack 是一种将 JavaScript 代码转换为更简单形式的工具，它可以分析和优化编写高度优化代码时遇到的常见问题。Prepack 目标是改善代码的性能和可读性，同时保持代码结构的不变性。
将 Prepack 添加到项目中，以便进行代码优化：
npm install --save-dev prepack
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- -----
------- -
------ -
-
----- --------
---- -------------------
--
--
--
-这将通过 Prepack 对代码进行优化。现在我们可以在代码中看到更简单的形式，同时保持代码的结构不变。
技巧八：使用 CSS 压缩工具来优化样式表
在打包后的应用程序中，CSS 文件可能会影响加载速度。为了缩短加载时间，我们可以使用 CSS 压缩工具对样式表进行优化。
使用 mini-css-extract-plugin 插件来将 CSS 分离到单独的文件中，并使用 optimize-css-assets-webpack-plugin 插件来优化和压缩 CSS。
npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin
-- -------------------- ---- -------
-- -----------------
----- -------------------- - ----------------------------------
----- ----------------------- - ---------------------------------------------
-------------- - -
-------- -
--- ----------------------
--------- ---------------------------
-------------- -------------------------
---
--
------------- -
---------- ---- -----------------------------
--
------- -
------ -
-
----- -----------------
---- -
----------------------------
-------------
-----------------
--------------
--
--
-- ----
--
--
-现在，Webpack 将会将所有的 CSS 样式表分离到单独的文件中，并通过 optimize-css-assets-webpack-plugin 插件对其进行优化和压缩。
技巧九：使用 PurgeCSS 删除未使用的 CSS
通过使用 PurgeCSS 工具，我们可以删除未使用的 CSS 代码，从而减少 CSS 文件的大小，进而加快应用程序的加载速度。
配置 PurgeCSS 并在编译时删除未使用的 CSS 代码：
npm install --save-dev glob-all purgecss-webpack-plugin
-- -------------------- ---- -------
-- -----------------
----- -------------- - ----------------------------------
----- ---- - -------------------
----- ----- - -
---- -------------------- -------
-
-------------- - -
-- -----
-------- -
--- ----------------
------ ------------------------------ - ------ ---- ---
---
--
-这将检查所有 CSS 文件中的样式，并删除未使用的 CSS 代码。
技巧十：使用 CDN 分发文件优化打包
使用 CDN 可以大大提高应用程序加载速度。如果您的应用程序是部署在生产环境中，您可以考虑将文件分发到 CDN 上。
通过设置 output.publicPath 为 CDN 地址，您可以将资源指向 CDN，并将其从主包中分离出来。
// webpack.prod.js
module.exports = {
output: {
publicPath: 'https://yourcdnurl.com/',
},
// 其他配置项
}现在，您的应用程序中的所有资源都将从 CDN 上加载，从而大大提高了加载速度。
结论
在本文中，我们介绍了使用 Webpack 进行打包优化的十个关键技巧。使用这些技巧，您可以改进您的应用程序的性能和效率，从而提高用户体验并加速应用程序的加载时间。希望这些技巧能对您的前端工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674809475883fc5ebff1cc3a