How Module Import Style Affects Bundle Size

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

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

Example

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

Analysis

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

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

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

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

Final Thoughts

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