前端模块导入方式对打包体积的影响

发表于 更新于 本文字数： 538 阅读时长 ≈ 1 分钟
本文介绍关于前端模块导入方式对打包体积的影响，包括使用场景、实现细节等，以提高关于前端模块导入方式对打包体积的影响的效率。

最近内部CR聊到了模块导入方式对体积的影响，个人觉得这个还挺重要的，因此这里mark下。

这里以一个组件库为例，在组件库的包中会看到有lib/es两个文件夹，实际上在开发我们在import时候是要注意的，如果import姿势不同，体积大小差异会巨大。

例子

先来个例子吧，下面截图可以看出import from es和import包根路径，实际上体积是一样的，但是当import from lib就差很远。

https://static.1991421.cn/2024/2024-08-25-224824.jpeg

分析

  1. Webpack有treeshaking。当JS是es module写法且构建为production,则会开启tree shaking.

  2. 如上的组件库，当我们走es import，则最终可以tree shaking，但走那么Webpack之类的本身就会去按需打包并不会全量打包。

  3. 如上的组件库的package.json中可以看到同时声明了main/module

    1
    2
    "main": "lib/index.js",
    "module": "es/index.js",

写在最后

前端构建体积一直是个很重要的问题，CDN/按需加载/按需打包/GZIP等等手段。上述体积问题只是一环。