• 记sentry配置sourcemap后的优化
  • Artiely
  • #vue#sentry#sourcemap#webpack
  • 2019-04-03
  • 97
  • 1 min read
  • loading...

记sentry配置sourcemap后的优化

需求!

打包后的文件自动过滤出sourcemap并压缩成zip包

项目结构:

说明

首先说明一下为什么会有这样的需求
因为项目中集成了 sentry 关于sentry的介绍 请点击我
如果你已经了解了 sentry
那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行,但是在实际生产中我们是不能上传sourcemap的,这不仅仅是不安全的问题。
所有我们会在配置中打开sourcemap

module.exports = {
// ...
  productionSourceMap: true,
// ...
}
复制成功
1
2
3
4
5

打开后就会在构建后的文件中产生以.map为后缀的文件

我们可以结合@sentry/webpack-plugin插件来实现自动上传sourcemap到sentry。更多相关信息请点击我
上面的一切都很顺利,但是我要发布到生产环境不可能手动去剔除.map文件吧,于是我就想到用nodejs去处理这个问题,

思路一 node

将文件拷贝一份,用递归遍历,拷贝的过程中去掉.map文件然后压缩文件

每次在npm run build完成后跑一下相关任务

思路二 webpack插件

然后我突然意识到可能不需要这么复杂,是否有对应的webpack插件就可以完成这个事情?
于是我找到了一个copy-webpack-plugin

更多信息 请点击我
看上去很美好一切需要的都有,but
实际是复制了一个空文件,然后我把dist改成其他文件就可以了。然后我发现是插件的执行顺序问题
然后我又去看了一遍webpack插件的执行钩子,并看到该插件issue相关问题讨论
虽然我发现vuecli3在复制asses下的文件到dist目录下也是使用的该插件,但是由于dist是在构建以后才生产的,而插件是在这之前就开始执行了,所以是空目录。

最终方案

当我放弃这些抱着试一试的态度去找webpck的zip插件时有了意外的发现。
这就是我的最终实现方式 非常的简单 zip-webpack-plugin

        new ZipPlugin({
          path: path.join(__dirname, 'dist'),
          filename: 'dist.zip',
          exclude: [/\.map$/]
        }),
复制成功
1
2
3
4
5

更多说明 请点击我

这是我的@sentry/webpack-plugin配置