Как оптимизировать размер пакета приложений React с помощью rollup.js - PullRequest
Новая
       17

Как оптимизировать размер пакета приложений React с помощью rollup.js

1 голос
/ 14 июня 2019

Я пытаюсь использовать rollup.js для связывания моего приложения реагирования. И я понял, что файл комплекта .js больше, чем скомпилированный с create-реагировать-приложение. Как я могу решить это. Я только что обнаружил rollup.js за последние две недели и мне это нравится. Мне нужна помощь, чтобы сделать это.

Я попытался с опциями, которые я нашел в сети, создав peerDev в package.json, как показано ниже 

"peerDependencies": {
    "react": ">= 16.x.x",
    "styled-jsx": ">= 3.x.x"
  }

и затем с помощью этой строки "external: id => /^react|styled-jsx/.test(id)" в rollup.config.js. Я понял, что это связано только с компонентами реагирования, но не с пакетом для приложения реагирования, хотя это значительно уменьшило размер файла. Страница не запускается при такой компиляции

Это файл конфигурации накопительного пакета без ссылки peerDependencies 

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import replace from "rollup-plugin-replace";
//import pkg from "./package.json";

const production = !process.env.ROLLUP_WATCH;
const NODE_ENV = process.env.NODE_ENV;

export default [
  {
    input: "src/index.js",
    output: {
      name: "bundle",
      file: "dist/main.js",
      format: "iife"
    },
    "process.env": {
      NODE_ENV: JSON.stringify("production")
    },
    plugins: [
      replace({
      "process.env.NODE_ENV": JSON.stringify(NODE_ENV)
    }),
    babel({
      exclude: "node_modules/**"
    }),
    resolve(),
    commonjs(),
      !production && livereload("dist"),
      production && terser()
    ],
    globals: {
      react: "React"
    },
    watch: {
      clearScreen: false
    }
  }
];

И это просто простой код реакции. 

import ReactDOM from 'react-dom';

ReactDOM.render(<h3>React with Rollup</h3>,document.getElementById('root'));

После компиляции. Это размер файла, который я получаю 961K. Это должно быть меньше. Потому что, с гораздо большими приложениями, размеры файлов намного меньше, чем это. Оперативная помощь будет очень ценится

...