在前端开发中，使用 webpack 进行打包是非常常见的操作。但是，有时候我们会发现打包出来的 js 文件非常大，这是为什么呢？
1. 代码中引入了大量的第三方库
第三方库通常都比较庞大，如果我们在代码中引入了很多第三方库，那么打包出来的 js 文件就会非常大。
解决方法：
- 只引入需要的部分
- 使用
externals配置来排除不需要打包的第三方库
示例代码：
-- -------------------- ---- ------- -- -- ------ --- ------ - ---- --------- -- -------- ------ - ---- - ---- --------- -- -- --------- -- -------------- - - -- --- ---------- - ------- -------- - --展开代码
2. 使用了 ES6 模块化语法
ES6 模块化语法可以让我们更方便地组织代码，但是在打包的时候会产生一些额外的代码，导致打包后的文件变大。
解决方法：
使用 babel 将 ES6 模块化语法转换成 CommonJS 或者 AMD 规范。
示例代码：
// ES6 模块化语法 import { foo } from './module'; // 转换后的 CommonJS 规范 const { foo } = require('./module');
3. 使用了大量的图片、字体等资源
如果我们在代码中使用了大量的图片、字体等资源，那么打包出来的 js 文件就会变得非常大。
解决方法：
- 将图片等资源通过
url-loader或者file-loader打包成单独的文件。 - 使用
webpack-bundle-analyzer分析打包后的文件，找出哪些模块占用了较多的空间，进行优化。
示例代码：
-- -------------------- ---- ------- -- -- ---------- ---- -------------- - - -- --- ------- - ------ - - ----- ----------------------- ---- - - ------- ------------- -------- - ------ ----- -- ---- --- ---- ------ -- ----- ------------------------ -- ------- ----------- --------- -- ---- - - - - - - --展开代码
4. 没有进行代码分割
如果我们在代码中没有进行代码分割，那么打包出来的 js 文件就会包含所有的代码，导致文件变得非常大。
解决方法：
使用 webpack 提供的代码分割功能，将代码分割成多个文件，按需加载。
示例代码：
-- -------------------- ---- ------- -- ------ -------------- - - -- --- ------------- - ------------ - ------- ----- - - --展开代码
总结
打包出来的 js 文件变大可能是多种原因共同作用的结果，我们需要结合具体情况进行分析和优化。通过优化，可以减小打包后的文件体积，提升页面加载速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65796938d2f5e1655d371dd7
