时间戳

首页 > 解决方案 > How do I uglify code when building Gatsby sites?

reactjs - How do I uglify code when building Gatsby sites?

问题描述

I'm deploying with Gatsby and netlify, however I can see the complete pristine code in the Sources tab. I wish I could uglify this and make this a bit more obscure. Is there a way to uglify this webpack folder? Thanks!

IMAGE: Code showing in webpack folder after build

PS: Even the official Gatsby website has the pristine code appearing, not sure if this is their design choice to make it more accessible or not.

Same for reactjs.org:

Reactjs.org Gatsby code

Same for Airbnb.io, with TODO comments:

Airbnb.io Gatsby code

Most sites you see in the Gatsby Showcase expose their code in webpack/./src.

标签： reactjswebpackgatsbyuglifyjs

解决方案

您可以添加自定义 webpack 配置以在生产中禁用源映射。

1 - 删除/public文件夹，以确保删除之前创建的源映射

2-将以下内容添加到您的gatsby-node.js文件中：

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      devtool: false
    })
  }
};


或者，如果您更愿意使用 gatsby 插件，您可以使用： https ://www.gatsbyjs.org/packages/gatsby-plugin-no-sourcemaps/基本上做同样的事情。

（看看它的作用https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-no-sourcemaps/gatsby-node.js）

确保先删除/public文件夹，然后运行gatsby build​​.

了解更多：

推荐阅读