Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Dynamic Imports, CDN / External scripts import in browser #28

Open
KrishnaPG opened this issue Jul 3, 2020 · 2 comments
Open

Feature: Dynamic Imports, CDN / External scripts import in browser #28

KrishnaPG opened this issue Jul 3, 2020 · 2 comments

Comments

@KrishnaPG
Copy link

KrishnaPG commented Jul 3, 2020 •
edited

Description

Currently the antd, react, eCharts etc. are hard-linked into the package, making the produced bundle size large. Please consider

  • enabling dynamic imports
  • allowing external libraries to be loaded from CDN also

This will reduce the bundle size, and webpack compile times will be small.

Solution

UMI documentation allows to use external scripts such as:

  scripts: process.env.NODE_ENV === 'development' ? [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
  ] : [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js',
  ],

But in the code, in many places, the packages are hard coded as:

import React from 'react';
import { Form as AForm } from 'antd';

It would be great if the code loads such third party packages

  1. dynamically, load on demand (Ref: https://umijs.org/docs/load-on-demand#load-component-on-demand )
  2. check if the package is already loaded externally first. If not do the import.
    • For example, do the import only if window.React is not already available. If already available, use it, instead of importing
@iShawnWang
Copy link

I think this is what you need iShawnWang/kilobyte#14 ~
which is typescript version of https://usehooks.com/useScript/

@KrishnaPG
Copy link
Author

KrishnaPG commented Jul 3, 2020 •
edited

Thank you @iShawnWang . I think that useScripts hook is referring to being able to load any script truly at runtime dynamically. Which is very powerful.

I was referring to much simpler option of being able to load the antd, eCharts, react etc. from the <head> section of the page, so that webpack does not need to bundle them. This improves the performance, due to reduced bundle size as well as loading from CDN heavily uses the network caches, browser caches etc.

The dynamic loading part I was referring to was chunking by the webpack such that components are loaded on demand rather than in a single big module.

Ofcourse, if the useScript hook can be used then it may solve all these problems too, but looks like it is slightly complex to implement. I could be wrong. If it is not complex, then it is also a good solution to consider.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@KrishnaPG @iShawnWang