Socket
Socket
Sign inDemoInstall

@jahredhope/react-loadable-webpack-plugin

Package Overview
Dependencies
10
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

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
1
Maintainers
1
Created
Weekly downloads
 

Readme

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

Last updated on 13 Oct 2018

Did you know?

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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc