[JavaScript知识库]为什么你构建的代码会比别人的大？

前言

代码体积的控制对前端来说至关重要，尽管网络条件逐渐变好，但是代码体积的增加不仅仅只影响资源加载速度，还会直接或间接影响浏览器各类性能指标。

例如增加用户内存使用消耗，内存的增加又会更频繁的触发 V8 引擎的 GC 机制，进而影响页面交互性能。

本文从一个典型的 Webpack+Babel 工程出发，找到构建产物体积变大的常见原因和对应的解决思路，减少项目代码构建后的体积

Babel

babel 最常见的用途就是代码降级，使构建后的代码能够被低版本浏览器兼容，按照功能可以划分两部分

1. API 降级
2. 语法降级

通过 Babel 构建后的代码为了适配低版本浏览器通常会比源代码大上几倍，这里面除了源代码外还包含 API 垫片和语法辅助函数，分别对应上诉的 API 降级和语法降级，我们看下如何减少这部分的代码体积

core-js

?? 按照目前最新版本的 babel@7，@babel/polyfill 已经废弃，我们使用 core-js 完成 API 的语法降级

core-js 可以为浏览器中可能不兼容的 API 提供垫片，例如 Promise，Map

import "core-js/modules/es.promise.js";

// 使用降级 API
const promise = Promise.resolve();
复制代码

在需要降级的 API 调用前 require 对应的 core-js 模块，就可以以污染全局变量或者原型链的方式实现 API 降级

手动插入 core-js 即麻烦又不安全，所以我们

开通VIP 解锁文章