View Full Version : Ability to light loading

15 Jun 2017, 1:26 AM
Our company are use Ext.js 4.2. We had decided to change our product and now are choose tech. It need to be simple to rewriting and have a high speed to load. Also we planned use isomorphic structure. While our choice fell on 'ext-react'.

I'd created a new application ext-react. There are import component in example file 'Layout.js'.

import { Transition, Container, TitleBar, Button, Sheet, Panel, Img } from '@extjs/ext-react';

I expected this import means that build will only needed components from 'ext-react' ( 'build.js' assembled webpack) package without full package ('ext.js') in 'index.html' but both file are loading.

<script type="text/javascript" src="ext-react\ext.js?7575db06314187a1510b"></script>
<script type="text/javascript" src="bundle.js?7575db06314187a1510b"></script>

If I disable loading 'ext.js' (big size) in 'index.html' I get error:

Uncaught ReferenceError: Ext is not defined at eval (ExtJSComponent.js:97) at Object.<anonymous> (bundle.js?7575db0…:2527) at __webpack_require__ (bundle.js?7575db0…:660) at fn (bundle.js?7575db0…:86) at eval (reactify.js:34) at Object.<anonymous> (bundle.js?7575db0…:1918) at __webpack_require__ (bundle.js?7575db0…:660) at fn (bundle.js?7575db0…:86) at eval (index.js:12) at Object.<anonymous> (bundle.js?7575db0…:1227)

screenshot (http://prntscr.com/fk0546)

Is there ability to loading only 'build.js' without loading 'ext.js'?

15 Jun 2017, 5:04 AM
In this case ext.js is not the full ExtReact library, but a minimized build produced by reactor-webpack-plugin containing only those ExtReact components used by your application and their dependencies. It needs to be loaded as a separate file and should actually help performance as the contents of ext.js are less likely to change than the rest of your app code and can thus benefit from caching. Most developers do something similar to split other vendor libraries into a separate bundle using webpack's CommonsChunkPlugin.

16 Jun 2017, 1:21 AM
Thank you, Mark.

Then I have a next question. Then I have a next question. I use standart application that get after run 'yo @extjs/ext-react'.I'm trying to build isomorphic application use ext-react package through node.js server. If we could build html on server side then we get a compensations on speed. My part ofserver code:


import React from 'react';
import ReactDom from 'react-dom/server';
import App from './src/App';

app.use('/js/', express.static('public/js/'));
app.use('/css/', express.static('public/js/ext-react/'));

app.use((req, res, next) => {
const componentHTML = ReactDom.renderToString(<App />);

res.status( 200 )
.set( 'Content-Type', 'text/html' )


function renderHTML(componentHTML) {
return `
<!DOCTYPE html>
<html lang="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css/ext.css?182036d0fc3ddd5362bb" rel="stylesheet"></head>
<div id="react-view">${componentHTML}</div>

<script defer type="text/javascript" src="js/ext-react/ext.js"></script>
<script defer type="text/javascript" src="js/bundle.js"></script>


Unfortunately I get error:

Grid: Ext.ClassManager.getByAlias('widget.grid'),

ReferenceError: Ext is not defined
at Object.<anonymous> (C:\projects\test-ext-react-prio\node_modules\@extjs\reactor\src\ExtJSComponent.js:21:11)
at Module._compile (module.js:570:32)
at Module._extensions..js (module.js:579:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\projects\test-ext-react-prio\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\projects\test-ext-react-prio\node_modules\@extjs\reactor\src\reactify.js:1:1)

This error appear after firs import '@extjs/ext-react'.

Maybe do you already tried to build same application and can give me any example.

16 Jun 2017, 10:42 AM
ExtReact is not currently compatible with server-side rendering.