语义 - 反应webpack大小是1.74M？

Question

我发现我的项目的常见供应商非常大.

我想看看哪个模块对大尺寸负责,发现语义-ui-react本身就是1.74M.

react-vendor.js 1.74 MB 2 [emit] [big] react-vendor

'react-vendor': [
   'semantic-ui-react',
 ],

  new CommonsChunkPlugin({
    name: "react-vendor",
    filename: "react-vendor.js",
    minChunks: Infinity,
  }),

有什么办法可以让文件变小吗？

Answer 1

步骤1

默认情况下,导入库将导入每个组件.如果您使用的是webpack 1,则可以按照捆绑包使用部分中显示的说明进行操作:

http://react.semantic-ui.com/usage#bundlers

示例配置显示了如何使用babel-plugin-lodash(尽管名称)自动将import语句转换为单个组件导入.明确导入单个组件将确保您只捆绑正在使用的组件.未使用的组件不会包含在您的捆绑包中.

第2步

每个组件都包含propTypes定义.这些仅在开发中有用.它们也很大而且冗长.如果process.env.NODE_ENV设置为"production"并作为全局公开,我们将我们的prop类型定义包装起来,以便在消除死代码的过程中自动删除它们.

你应该已经这样做,因为在生产模式下对bundle做出反应是必需的.以防万一,以下是如何执行此操作的说明:如何打开/关闭ReactJS的"开发模式"？

删除prop类型定义将节省更多空间.

第3步

如果源代码缩减为仅包含您正在使用的组件,并且这些组件仅缩减为生产代码,那么您现在应该缩小并压缩捆绑包.

检查webpack文档以启用生产,因为这将缩小您的代码并使用死代码消除,这非常简单.然后,您可以使用以下命令压缩捆绑包:https://github.com/webpack-contrib/compression-webpack-plugin.

结论

自从我这样做以来,对库进行了一些更新,但是对于UMD格式的整个库,我实现了81.8 kB,其开销略大.

PR在这里显示完整的设置:https://github.com/webpack-contrib/compression-webpack-plugin

统计数据:https://github.com/Semantic-Org/Semantic-UI-React/blob/3aa72bc76aac05c526e2b14a6ed4687995cd11af/stats-library.md