import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';

Instalación

Million.js asume que ya tienes un proyecto React existente. Para obtener información sobre cómo crear una aplicación con React, consulta la documentación de React.

Instalación via CLI

La interfaz de línea de comandos (CLI) de Million.js instalará automáticamente el paquete y configurará tu proyecto por ti.

bash

npx million@latest

</Tab> <Tab> ```bash copy pnpx million@latest ``` </Tab> <Tab> ```bash copy yarn add million@latest ``` </Tab> <Tab> ```bash copy bunx million@latest ``` </Tab> </Tabs> <Callout type="info"> Million.js es compatible con React 16 y versiones posteriores. Si estás utilizando una versión más antigua de React, deberás realizar una actualización primero.

También deberá asegurarse de tener Node.js 18 y superior. </Callout>

¡Eso es todo! Tu proyecto ahora está en funcionamiento con Million.js 🎉

Instalar manualmente

Si encuentras problemas al instalar a través de la CLI, o si tienes una configuración personalizada, puedes instalar Million.js manualmente.

Ten en cuenta que hay dos modos entre los que puedes elegir: Automático y Manual:

El modo automático configurará, analizará y optimizará automáticamente tu proyecto por ti. Este es el modo recomendado.
El modo Manual requerirá que escribas código para optimizar ciertas partes de tu proyecto. Este modo es recomendado para usuarios avanzados que deseen tener un mayor control sobre su proyecto.

Instala Million.js

bash

npm install million

</Tab> <Tab> ```bash copy pnpm install million ``` </Tab> <Tab> ```bash copy yarn add million ``` </Tab> <Tab> ```bash copy bun add million ``` </Tab> </Tabs>

Agrega el compilador a tu aplicación

Million.js es compatible dentro de los directorios /app (solo componentes "use client") y /pages.

import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const millionConfig = {
  auto: true,// Si estas usando RSC: auto: { rsc: true },
};

export default million.next(nextConfig, millionConfig);

</Tab> <Tab> ```js filename="astro.config.mjs" import { defineConfig } from "astro/config"; import million from "million/compiler";

export default defineConfig({ vite: { plugins: [million.vite({ mode: "react", server: true, auto: true })], }, });

</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true, auto: true })],
  });
};

</Tab> <Tab> ```js filename="vite.config.js" import million from "million/compiler"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite";

export default defineConfig({ plugins: [million.vite({ auto: true }), react()], });

</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), remix()],
});

const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};

</Tab> <Tab> ```js filename="webpack.config.js" const million = require("million/compiler"); module.exports = { plugins: [million.webpack({ auto: true })], }; ``` </Tab> <Tab> ```js filename="rollup.config.js" import million from "million/compiler";

export default { plugins: [million.rollup({ auto: true })], };

</Tab>
</Tabs>

</Steps>
</Tab>



<Tab>

<Steps>

### Instala Million.js


<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
<Tab>
```bash copy
npm install million

</Tab> <Tab> ```bash copy pnpm install million ``` </Tab> <Tab> ```bash copy yarn add million ``` </Tab> <Tab> ```bash copy bun add million ``` </Tab> </Tabs>

Agrega el compilador a tu aplicación

Million.js es compatible dentro de los directorios /app (solo componentes "use client") y /pages.

import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default million.next(nextConfig);

</Tab> <Tab> ```js filename="astro.config.mjs" import { defineConfig } from "astro/config"; import million from "million/compiler";

export default defineConfig({ vite: { plugins: [million.vite({ mode: "react", server: true })], }, });

</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true })],
  });
};

</Tab> <Tab> ```js filename="vite.config.js" import million from "million/compiler"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite";

export default defineConfig({ plugins: [million.vite(), react()], });

</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), remix()],
});

</Tab> <Tab> <Callout type="warning"> Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder. </Callout> ```js filename="craco.config.js" const million = require("million/compiler"); module.exports = { webpack: { plugins: { add: [million.webpack()] }, }, }; ``` </Tab> <Tab> ```js filename="webpack.config.js" const million = require("million/compiler"); module.exports = { plugins: [million.webpack()], }; ``` </Tab> <Tab> ```js filename="rollup.config.js" import million from "million/compiler";

export default { plugins: [million.rollup()], };

</Tab>

</Tabs>

</Steps>

</Tab>

</Tabs>