search

umijs / sula

🚀 Pluggable enterprise-level configurable framework based on antd.
https://docs.sula.vercel.app
MIT License
789 stars 90 forks source link

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

Open KrishnaPG opened 4 years ago

KrishnaPG commented 4 years ago

Description

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

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 commented 4 years ago

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

KrishnaPG commented 4 years ago

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.