JavaScript 如何打包

打开电脑的桌面，双击那个写着“main.js”的图标时，你可能没意识到，浏览器加载的代码根本不是这个样子——它经过了一场看不见的“打包”。

为什么要给JS打包？

想象你要寄一份包含10页内容的快递，如果直接把10张纸装在10个信封里，快递员要跑10次，收件人拆10次；但如果把所有纸整理成一叠装在一个大信封里，快递只跑1次，收件人拆一次就能拿到所有内容。JS打包就像整理快递，把零散的JS文件变成一个或少数几个文件，让浏览器少跑“请求次数”，加载速度快好几倍。

打包不是“把代码拼起来”这么简单

很多人以为打包就是把所有JS文件粘成一坨，其实不然。比如你写了个计算身高的工具函数，只有注册页面需要用到，打包时可以把它和注册相关的代码放一起，登录页面用不到的话就不会加载，这叫“代码分割”——就像寄快递时，把常用的零食和不常用的工具分两个包裹，只寄需要的那个。另外，不同浏览器对JS的语法支持不一样，打包时还会把新语法转成旧语法，让老浏览器也能看懂，这就像把外文快递译成中文，保证所有收件人都能读明白。

日常开发常用的打包工具

不用自己写代码做打包，现在有现成的工具，最常用的两个是Webpack和Vite。举个生活化的例子：Webpack就像一个经验丰富的老快递员，会把你的所有文件（JS、图片、CSS甚至字体）都整理好，还会帮你压缩大小，避免浪费流量；Vite则是个年轻的“闪送员”，开发时反应特别快，改一行代码几乎立刻就能看到效果，适合现在流行的前端框架开发。

简单的打包操作步骤（新手也能上手）

如果想自己试一次打包，不用复杂配置也能做。首先打开电脑的命令行，新建一个文件夹，在里面建两个JS文件：一个写“function sayHi() { alert('你好呀') }”，另一个写“import { sayHi } from './hi.js'; sayHi()”——这就是用了“模块导入”，告诉打包工具用哪个文件的内容。然后初始化一个简单的配置文件，告诉工具“把第二个文件打包成一个叫bundle.js的文件”，最后运行打包命令，就能在文件夹里看到那个合并好、甚至压缩过的JS文件了，把它放到网页里，打开就能看到弹窗效果。

打包后的效果

打包完成后，你可以在网页的开发者工具里看到，浏览器只加载了1-2个JS文件，而不是零散的十几个。对于用户来说，页面加载速度变快了，不用等半天才能点按钮；对于开发者来说，不用再担心代码混乱，能把功能拆成小文件，改起代码来更省心。

现在，你再打开浏览器看网页的JS文件时，就知道那坨看不懂的字符背后，是打包工具帮你完成的“整理快递”工作了。