在前端开发中，webpack 已经成为了一个绝对的重要工具。通过将各种资源打包成一个文件，在开发阶段提高了代码组织的效率，在生产环境下，又可以优化性能，减小请求。然而，webpack 所构建的代码往往会在可读性、性能等方面存在压力。在本文中，我们将分享如何通过 webpack 进行代码优化，同时加入 Babel，从而让前端开发更加准确地拥抱现代化的工具。
优化 webpack 代码可读性
webpack 产生的代码，其实是经过 babel 转换后的代码，我们来看一段最简单的代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ----- ----------- ------- --------- - -------- - ------ ----------------------- - - ------ ------- ------------展开代码
编译后的代码是这样的：
-- -------------------- ---- ------- -- ------- --- --------- ------------------- - ------ ------ - --------- - ---- -------- ----- ----------- ------- --------- - -------- - ------ --------------------------------------- ----- --------------- - - -------------- - ------------ ---展开代码
显然看上去不太友好，阅读时会感到不少困惑。所以，我们需要进行一些代码优化。
souce-map
source-map 是 webpack 专门用来对代码打包后生成 map 文件的一个选项，它能将转换后的代码映射到它原本的代码。以这个简单的代码为例，我们启用 souce-map：
module.exports = { // ... mode: 'development', devtool: 'source-map', }
编译后我们可以看到在同级目录下会多出一个 .js.map 文件，然后我们打开浏览器的开发者工具，在 Sources 面板中，可以看到我们的代码还是原本的代码，但加了个特殊注释，这个注释中记录的就是映射的信息。如下所示：
对于一些复杂的代码，这种方式优雅地解决了代码可读性问题。
关注代码逻辑（Code Splitting）
webpack 不仅仅是一个 bundler ，它也提供了很多工具来优化我们的代码。类似代码拆分和按需加载的功能都是比较有用的特性，通过这些特性可以加快前端应用的速度，配合 souce-map，优化我们的应用代码。
Babel 性能优化
如何更快地进行构建，这是每个前端开发人员都面临的问题。优化 webpack 打包是我们不得不思考的问题，不过这个问题不仅仅局限于 webpack 本身，还包括我们通常使用的 Babel 转换工具。
cacheDirectory & exclude
虽然Babel 能够同时转换 JS 代码及其它代码类型（如 jsx，ts，等），但是它同时也是一种耗费时间的操作，因为它的操作对象通常都是整个文件夹，这样的操作可能会出现不必要的重复计算，这样会导致构建非常缓慢。（尤其是对于那些使用了很多 decorators、decoratedClasses等功能的时候）
其中，Babel 6 及以上的版本提供了 cacheDirectory 的机制，它能够将缓存对象写入磁盘，这样避免过多的重新计算，从而优化其性能表现。使用场景：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ -- ----- ---------- -- --- ------------------ ------- --------------- -- ------- -------- -------- -- ------ --------------------- ----------------------- -- ----- ----------------- -------- - ------------------- - -- - -展开代码
useBuiltIn
随着 ES6 的推出，Babel 编译时的 presets 参数现在默认不再包含 ES6 转换，es2015 变更为 @babel/preset-env （这里只是阐述与 Webpack 或者 Gulp 集成时的作用）。这里的核心原则是只处理你需要的特性，而不是所有特性，this 既可以由 Babel 来转化，也可以有运行环境/框架提供一个 polyfill 来提供。
通过 adding useBuiltIns option to your .babelrc file with a value of usage, you can opt to include only the needed polyfills.
-- -------------------- ---- ------- - ---------- - - -------------------- - -------------- ------- - - - -展开代码
完整的代码可以参考以下：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ -- ----- ---------- -- --- ------------------ ------- --------------- -- ------- -------- -------- -- ------ --------------------- ----------------------- -------- - -------------------- -- ------------------------------------------------- -- ---------------------------------- -------- - ------------------- -- --------- -- -- ----------------- ---------------------------- -- ------------------------------------------------- -------------- ------- - -- - -展开代码
本文我们详细介绍了 webpack 构建优化有关的内容，旨在为大家提供打包优化的解决思路。同时，对 Babel 性能优化也进行了简单的介绍，并给出了具体代码。希望能对前端开发人员有所帮助，提高我们的代码效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b93d86306f20b3a677a414
