Socket
Socket
Sign inDemoInstall

@jahredhope/react-loadable-webpack-plugin

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jahredhope/react-loadable-webpack-plugin

Webpack plugin for creating and reading a react-loadable manifest


Version published
Weekly downloads
3
Maintainers
1
Weekly downloads
 
Created
Source

Build Status npm semantic-release code style: prettier

@jahredhope/react-loadable-webpack-plugin

A webpack loader to create and read react-loadable compatible manifest files.

react-loadable contains it’s own packaged webpack loader. However some features are not yet available in the packaged version. Once available this package can be deprecated.

  • Supports output to webpack assets
  • Supports write to disk

PRs, feature requests and bug reports welcome.

Install

$ npm install react-loadable @jahredhope/react-loadable-webpack-plugin
# OR
$ yarn add react-loadable @jahredhope/react-loadable-webpack-plugin

Usage

webpack.config.js

const {
  ReactLoadablePlugin
} = require("@jahredhope/react-loadable-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new ReactLoadablePlugin({
      filename: "react-loadable.json"
    })
  ]
};

src/render.js

const { getBundles } = require("@jahredhope/react-loadable-webpack-plugin");

// ...
function render({ stats }) {
  const modules = [];
  const appHtml = ReactDOMServer.renderToString(
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <App />
    </Loadable.Capture>
  );

  const bundles = getBundles(stats, modules);

  return `<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ${scripts.map(src => `<link rel="preload" href=${src} as="script" />`)}
  </head>
  <body>
    <div id="root">${appHtml}</div>
    ${src.map(
      script => `<script src="${src}" type="application/javascript"></script>`
    )}
    <!-- ... -->
  </body>
</html>`;
}

Keywords

FAQs

Package last updated on 13 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc