npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rn-fast-pack

v1.0.4

Published

speed up react-natvie packing time. A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.

Downloads

14

Readme

Why

metro is recommend to use with react-native, and integrate react-native out-of-box, but metro has some shortcomings:

  • the official documents is too brief to understand, let alone to customized or optimize performance
  • sometimes too slow
  • can't split code
  • without treeshaking
  • can't optimize image
  • ...

so, I usually look forward to one way to use webpack in react-native,yeh, it come true.

inspired by repack, I make some progress for more easy using and high speed.

Intro


rn-fast-pack uses Webpack 5 and React Native CLI's plugin system to allow you to bundle your application using Webpack and allow to easily switch from Metro.

Features

  • [x] Webpack ecosystem, plugins and utilities
  • [x] Build bundle for iOS, Android and out-of-tree platforms
  • [x] Development server with support for:
    • Remote JS debugging
    • Source Map symbolication
    • Hot Module Replacement and React Refresh
    • Reloading application from CLI using r key
  • [x] Built-in Hot Module Replacement + React Refresh support
  • [x] Flipper support:
    • Crash Reporter,
    • Application logs
    • Layout
    • Network
    • Hermes debugger
    • React DevTools
    • Development server (debugging/verbose) logs
  • [x] Hermes support:
    • Running the production/development bundle using Hermes engine
    • Transforming production bundle into bytecode bundle
    • Inspecting running Hermes engine with Flipper
  • [x] [Code splitting]:
    • Dynamic import() support with and without React.lazy() (recommended).
    • Arbitrary scripts (only for advanced users).
  • [x] Web Dashboard with compilation status, server logs and artifacts.

Minimum requirements

react-native >= 0.62.0
Node >= 12

Useage

yarn add -D rn-fast-pack

Add the following content to react-native.config.js (or create it if it doesn't exist):

module.exports = {
  commands: require('rn-fast-pack/commands')
};

open project.pbxproj and find Bundle React Native code and images phase, Add export BUNDLE_COMMAND=webpack-bundle to the phase. After the change, the content of this phase should look similar to:

export NODE_BINARY=node
export BUNDLE_COMMAND=webpack-bundle
../node_modules/react-native/scripts/react-native-xcode.sh

open android/app/build.gradle and add bundleCommand: webpack-bundle to project.ext.react.

project.ext.react = [
    enableHermes: false,
    bundleCommand: "webpack-bundle"
]

then you can create one new webpack.config.js(optional)

// can be empty
module.exports = {}

everything is done. then you can use:

react-native webpack-start
# or
react-native webpack-bundle

if you want to use back to metro in case, you can set package.json scripts as blow:

"start:webpack": "react-native webpack-start",
"start:metro": "react-native start",
"bundle:metro:ios": "react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios"
"bundle:webpack:ios": "react-native webpack-bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios"

Attention

react-native 0.62 bundle name is index.android.bundle or index.ios.bundle, but from 0.63 has changed into index.bundle. you can customize it by setting webpack config:

react-native webpack-start --webpackPath ...

your webpack.config.js looks like:

module.exports = {
  output: {
    filename: `index.${platform}.bundle`, // index.bundle
  },
}

Code splitting

rn-fast-pack use webpack splitchunks to split code as default:

splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    }

but you can customize as you need.

// StudentSide.js
import * as React from 'react';
import { View, Text } from 'react-native';

export default function StudentSide({ user }) {
  return (
    <View style={{ flex: 1 }}>
      <Text>Hello {user.name}!</Text>
      <Text>You are a student.</Text>
      {/* ...more student related code */}
    </View>
  )
}
// TeacherSide.js
import * as React from 'react';
import { View, Text } from 'react-native';

export default function TeacherSide({ user }) {
  return (
    <View style={{ flex: 1 }}>
      <Text>Hello {user.name}!</Text>
      <Text>You are a teacher.</Text>
      {/* ...more teacher related code */}
    </View>
  )
}
// Home.js
import * as React from 'react';
import { Text } from 'react-native';

const StudentSide = React.lazy(
  () => import(/* webpackChunkName: "student" */ './StudentSide.js')
);

const TeacherSide = React.lazy(
  () => import(/* webpackChunkName: "teacher" */ './TeacherSide.js')
);

export function Home({ user }) {
  const Side = React.useMemo(
    () => user.role === 'student'
      ? <StudentSide user={user} />
      : <TeacherSize user={user} />,
    [user]
  );

  return (
    <React.Suspense fallback={<Text>Loading...</Text>}>
      <Side />
    </React.Suspense>
  )
}
// index.js
import { AppRegistry } from 'react-native';
import { ChunkManager } from '@callstack/repack/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
import App from './src/App'; // Your application's root component
import { name as appName } from './app.json';

ChunkManager.configure({
  storage: AsyncStorage, // optional
  resolveRemoteChunk: async (chunkId) => {
    // Feel free to use any kind of remote config solution to obtain
    // a base URL for the chunks, if you don't know where they will
    // be hosted.

    return {
      url: `http://my-domain.dev/${chunkId}`,
    };
  },
});

AppRegistry.registerComponent(appName, () => App);

TodoList

  • [ ] image optimize
  • [ ] load babel
  • [x] webpack plugin merge
  • [ ] android optimize
  • [ ] ios optimize
  • [ ] local or remote chunk switch easily
  • [ ] switch back to metro easily
  • [ ] tar/zip replace resource