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

发布时间：2020-12-15 05:04:18 所属栏目：百科来源：网络整理

导读：我发现我的项目的常见供应商非常大. 我想看看哪个模块对大尺寸负责,发现语义-ui-react本身就是1.74M. react-vendor.js 1.74 MB 2 [emitted] [big] react-vendor 'react-vendor': [ 'semantic-ui-react',],new CommonsChunkPlugin({ name: "react-vendor",fil

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

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

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

'react-vendor': [
   'semantic-ui-react',],new CommonsChunkPlugin({
    name: "react-vendor",filename: "react-vendor.js",minChunks: Infinity,}),

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

步骤1

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

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

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

第2步

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

你应该已经这样做,因为在生产模式下对bundle做出反应是必需的.以防万一,以下是如何执行此操作的说明：How to turn on/off ReactJS ‘development mode’?

删除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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!