Question

我正在尝试使用rollup.js捆绑我的React应用。而且我意识到bundle .js文件比使用create-react-app编译的文件大。我该如何解决。最近两周我才发现rollup.js并喜欢它。我需要帮助才能完成此任务。

我尝试通过在package.json中创建peerDev在网上找到的选项，如下所示

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

，然后在rollup.config.js中使用“ external：id => /^react|styled-jsx/.test(id）”这一行。我意识到这只与react组件有关，而不是与react app捆绑在一起，即使它确实大大减少了文件大小。以这种方式编译后页面无法运行

这是汇总配置文件，没有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的文件大小。这应该更小。因为，对于更大的应用程序，文件大小远小于此大小。及时的帮助将不胜感激

如何使用rollup.js优化React应用包的大小

0 个答案: