背景
项目基于ice.js进行构建，经过了近一年多的升级迭代，项目体积已经非常大了，依赖的npm包也也很多。目前本地启动dev服务大概需要1min，云上构建生产版本至少需要5min。生产版本的资源体积也较大，虽然是内部项目，但该做的还是得做，因此决定从加快构建速度、减小资源体积2个方面进行优化。
开发环境：
MacBookPro M1版，Node 12.0+ ，webpack 4.46.0
减少资源体积
一般来说，减少资源体积也就意味着需要的构建时间较少，所以先从这里下手。首先需要分析项目资源情况，一般来说，会使用webpack-bundle-analyzer插件，这里我们也不例外，但由于build-json以及内置了该插件，所以我们直接选择在启动命令中开启即可。
构建完成后，会自动在浏览器打开窗口展示项目资源情况：
构建所需时间：56S
可以看到，项目中占体积较大的是Bizcharts以及monaco-editor。对于Bizcharts我决定采用将其移出构建范围，采用直接用umd版本的cdn进行引入。在我们的项目中，可以配置build.json中的externals选项，它可以将某些 import 的包排除在 bundle 之外，在运行时再去外部获取这些依赖。 比如，从 CDN 引入 React 资源，而不是将它打包，详细配置同 webpack 的externals
其次也可以看到，我们项目中的react一直都是通过cdn引入的。排除bizcharts后，项目体积减小了3M
最后一个较大的资源占用就是monaco-editor了，但搜寻了整个项目，发现仅仅是在一处需要编辑Sql的地方使用到了，最终是决定替换掉monaco-editor，采用一个基于ace-editor开发的编辑器，主要原因是我们并用不上monaco-editor这么复杂的编辑器，简单的Sql录入采用更轻量的编辑器足以。
尤其是还引入了不需要的monaco-editor语言配置，这也增加了项目体积
可以看到，现在开发环境资源由最早的53M减少到了28M
剩下的资源在体积上优化的点就比较少了，但还是可以在开发中使用按需引用的方式来减小体积，按需引用或是利用tree-shaking的方式，以最常用的lodsah为例，可以产考这篇文章Webpack 按需打包 Loadsh
在我目前的项目中，可以看到，由于规范的不统一，确实出现了各种各样的使用方式，在优化后我们统一采用按需使用或者使用支持tree-shaking的lodash-es
加快构建速度
- 限定文件类型，排除
node_modules等无需处理内容。 并开启bable编译缓存
最终生产情况构建速度约为45S， 相比最开始情况减少了10S左右
