发表于 | 分类于

前文提及，项目包体积需限制 200k 左右，
近日项目经理又提了一些交互优化相关需求，额外引入一些组件，
嗯，最终实现了功能，包体积也如期超过了 200k。

分析定位原因，
外部优化已经使用 gzip，
这次只能从代码内部分析了。

打包之后，打开包分析页面，
发现，core-js 占据了相当多的空间，
好像我们也不需要兼容版本过低的浏览器，
确认之后，
于是，查了一些相关资料，移除 core-js，
项目包体积控制在 200k 之内，项目再次交付。

Show Code

babel.config.js 配置

方案一：直接去掉 vue 相关的 presets 配置。

1
2
3
module.exports = {
    // presets: ['@vue/app'],
}

方案二：指定支持设备的版本，譬如 chrome 80+ 版本。

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        useBuiltIns: false,
        targets: {
          chrome: "80",
        },
      },
    ],
  ]
}

至此，此项目应该可以告一段落，这三篇文章算是对解决该项目打包问题的一个总结吧。

tips:
文章都是在解决问题的过程中一点一点完成的。
先有题目，后补全内容，
先有整体框架，再补全细节。
不过也是一拖再拖，
希望可以锻炼自己归纳总结的思维能力，
与规避拖延症养成良好高效的习惯。