在现阶段，Web 应用的前端开发中，Webpack 作为一款自动化构建工具大家应该都不会陌生。Webpack 能够帮助我们打包前端代码，减轻前端工作的负担。然而，Webpack 打包后的代码存在一个明显问题：页面加载慢。本文将介绍如何解决这一问题。
问题原因
- 代码文件过大：Webpack 打包后的文件通常体积较大，压缩后也不小，会导致页面加载缓慢。
- 使用了过多的第三方库：过多的第三方库会增加文件体积，也会使得打包时间变得更长，同时，框架的加载也会影响网页的加载速度。
解决方案
- 减小代码体积
代码分割
使用 Webpack 的代码分割功能，将代码分割成较小的块，按需请求，这样可以减少首屏加载时间和整体页面体积。Webpack 4 及更高版本支持 动态导入，可以使用 import() 实现代码分割。
示例代码：
// 原来的代码
import { a } from './a';
import { b } from './b';
// 通过动态导入拆分模块
import('./a').then(({ a }) => console.log(a));
import('./b').then(({ b } => console.log(b));删除无用代码
删除无用代码能够减少代码体积。可以使用 PurifyCSS 或 Webpack Cleanup Plugin 等工具来删除无用代码。
示例代码：
-- -------------------- ---- -------
-- -- --------- ---- --- --
--- ------- - ------------- --------------------
--- --- - --------------------
--------------- ---- -
------- --------------------------
---
-- -- ------- ------- ------ ------
----- -------------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------------
-
--压缩代码
代码压缩可以减小文件体积，并且减少加载时间。Webpack 内置了 UglifyJSPlugin 来压缩 JavaScript 代码。
示例代码：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJSPlugin()
]
};PS：从 Webpack 5 开始，内置的压缩工具将被移除，建议使用 TerserWebpackPlugin。
打包时去除 console.log
去除 console.log 这类代码可以减小文件体积，提高加载速度。使用 babel-plugin-transform-remove-console，可以在打包时自动将代码中的 console 删除。
示例代码：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
----- --------------------------- - -------------------------------------------------
-------------- - -
-------- -
--- -----------------
--- ---------------------------------
--------- -
--------- -----
--
--------- ------
---------- -----
-------- ------
-- -- -----------
-- ------------------------------------------------------------------------------------------
-------- -----------------------------
--
-
--- 使用 CDN
使用 CDN 加载常用库可以减少文件体积，加快文件加载速度。同时，可以利用 CDN 的并行下载能力，多线程下载可以提高加载速度。
示例代码：
-- -------------------- ---- ------- ---- -- ------ - --- -- ------ --- ------- ---------------------- --------------------------------------------------------- --------- ---- -- --------- - --- -- ------------ ----- ---------------- --------------------------------------------------------------------- ------- ---------------------- ------------------------------------------------------------------ ---------
- 将第三方库拆分打包
第三方库通常不会修改，所以可以将第三方库（例如 React、Vue 等）单独打包出来，以供浏览器缓存，当下次使用时，可以直接从浏览器缓存中读取，从而减少加载时间。
示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
------ --------- ------------
--
------- -
--------- ------------
----- ----------------------- -----------
-------- --------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ---------------------------------
--
-
--总结
通过代码分割、删除无用代码、压缩代码、使用 CDN 或将第三方库单独打包等方案，可以解决 Webpack 打包后页面加载慢的问题。同时，也能提高页面的性能和用户体验，让用户更快地获得所需的信息。
参考资料
- Webpack Code Splitting Guide
- PurifyCSS
- Webpack Cleanup Plugin
- UglifyJSPlugin
- TerserWebpackPlugin
- babel-plugin-transform-remove-console
- Webpack DllPlugin
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463756b968c7c53b047dc2e