[PReact] Reduce the Size of a React App in Two Lines with preact-compat

Preact压缩React应用

weixin_34365635

于 2017-06-18 00:07:00 发布

阅读量74

点赞数

文章标签： javascript ViewUI

本文介绍如何使用Preact兼容库来显著减小现有React应用程序的文件大小。通过将React替换为Preact，一个示例项目的主包大小从43KB减少到了13KB。文章详细说明了安装和配置步骤。

Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat

Create a new react app:

create-react-app preact-demo

Build:

npm run build

You can see that the size of main bundle file is 43kb.

Now let's run:

npm run eject

Install:

npm install --save preact preact-compat

open config/webpack.config.prod.js:

    alias: {
      
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    },

In 'alias' field, add tow fields for preact.

Run the build again. Now you can see that the bundle size is '13KB'!