To reduce page load time by reducing the requests of fetching JavaScript files.
2. Creating a production build manually
Download and Install Sencha Cmd and Extjs sdk
1) Download SenchaCmd-3.1.2.342-windows.exe and ext-4.2.1-gpl.zip
2) Install SenchaCmd-3.1.2.342-windows.exe
3) Add Sencha cmd bin directory to you path, for me, C:\tools\SenchaCmd\bin\Sencha\Cmd\3.1.2.342 is added to my path
4) Extract ext-4.2.1-gpl.zip, assume the extracted folder name is C:\tools\ext-4.2.1.883
Create a new Sencha Cmd Project for getting the configuration files required to build iem-web
1) Open a command prompt
2) Change directory to C:\tools\ext-4.2.1.883
3) Enter the following command
sencha generate app IEM ProjectBuild/IEM
4) You will see a generated project named IEM under C:\tools\ext-4.2.1.883\ProjectBuild\IEM
5) Why we need this step? We want to get the configuration files required by sencha cmd for iem-web, we can easily do modification on these files instead of creating them manually.
Copy Your Project files into the Sencha Cmd Project
1) Remove app folder under ProjectBuild/IEM
2) Copy iem-web/app folder to ProjectBuild/IEM
3) Copy iem-web/IemApp.js, iemForCompile.jsp, api-debug.js, Util.js to ProjectBuild/IEM
Create a Production Build
1) Modify ProjectBuild/IEM/.sencha/app/sencha.cfg file.
a) set app.classpath=${app.dir}/app,${app.dir}/iemApp.js
b) set app.page.name=iemForCompile.jsp
2) add “skip.sass=true” to ProjectBuild/IEM/.sencha/app/production.properties
3) Open a command prompt and change directory to ProjectBuild/IEM
4) Enter the following command:
sencha app build
5) You will see the generated files under C:\tools\ext-4.2.1.883\build\IEM\production
all-classes.js and iemForCompile.jsp
6) Rename iemForCompile.jsp to iem.jsp
7) Copy the all-classes.js and iem.jsp to your tomcat
8) Open iem.jsp and do the following change
a) Change
To
b) Remove
9) Your final iem.jsp will look like this
Jsp related codes are omitted …
IEM Loading page, please wait ...
10) test your application at http://localhost:8080/iem-web/iem.jsp
3. Integrating the build with maven
Copy extjs related files and sencha cmd related files required by building process to iem-web\jsBuild folder.
Please note this step is to prepare the execution environment for iem-web, the JavaScript files of iem-web are not in this folder, and they will be copied in maven.
Run sencha generate app IEM ProjectBuild/IEM command under iem-web\jsBuild\ext-4.2.1.883 to generate an empty IEM project and the configuration files we need.
Still we don’t have the iem-web JavaScript files.
Modify configuration files as described on section “Creating a production build manually” to configure iem-web project properly.
The folder structure looks like as following screenshot:
Modify pom.xml to do the integration
1) Copy iem-web JavaScript files to jsBuild/ext-4.2.1.883/ProjectBuild/IEM/ for build
maven-resources-plugin 2.4.3 copy-single-files-for-sench-cmd-build validate copy-resources jsBuild/ext-4.2.1.883/ProjectBuild/IEM src/main/webapp/ api-debug.js iemApp.js iem.jsp Util.js copy-app-folder-for-sench-cmd-build validate copy-resources jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app src/main/webapp/app
2) We need to do some modification, because we need to run the “sencha app build” command under jsBuild/ext-4.2.1.883/ProjectBuild/IEM folder, so we need to modify some related path in iem.jsp
org.apache.maven.plugins maven-antrun-plugin 1.7 modify iem.jsp for build initialize run copy sencha cmd output files and bankup the original jsp file process-sources run modify generated js file process-sources ]]> run
3) Start the build by executing external command in maven or use maven execution plug-in to do this
a) By executing external command
Creating a Production Build with Sencha Command generate-sources run
The content of jsBuild.bat:
@echo off set "CURRENT_DIR=%cd%" cd jsBuild\ext-4.2.1.883\ProjectBuild\IEM java -Xms256m -Xmx800m -jar ../../../senchaCmd/sencha.jar app build cd "%CURRENT_DIR%" exit
The content of jsBuild.sh
#!/bin/bash
CURDIR=${PWD}
BASEDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
echo change to project directory
cd jsBuild\ext-4.2.1.883\ProjectBuild\IEM
echo current directory is ${PWD}
echo *********************************start building js********************************
java -Xms1024m -Xmx1280m -jar ../../../senchaCmd/sencha.jar app build
echo *********************************end building js**********************************
cd ${CURDIR}
exit
b) Use maven execution plug-in
Creating a Production Build with Sencha Command generate-sources run
The purpose of running bat or sh files is to run “sencha app build” under the specified folder jsBuild\ext-4.2.1.883\ProjectBuild\IEM, this is required by sencha cmd, otherwise they are a lot of configuration files need to adjusted and I am not sure whether we can adjust them correctly.
4) Also don’t forget to clean up the related files in a new round of building
maven-clean-plugin ${basedir}/src/main/resources/com ${basedir}/src/test/resources/com ${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app ${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM api-debug.js iemApp.js iem.jsp Util.js ${basedir}/jsBuild/ext-4.2.1.883/build/IEM ${basedir}/src/main/webapp all-classes.js iemc.jsp
5) A sample pom.xml related SenchaCmd is as following:
SenchaCmd Intergration with Maven
maven-resources-plugin 2.4.3 copy-single-files-for-sench-cmd-build validate copy-resources jsBuild/ext-4.2.1.883/ProjectBuild/IEM src/main/webapp/ api-debug.js iemApp.js iem.jsp Util.js copy-app-folder-for-sench-cmd-build validate copy-resources jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app src/main/webapp/app maven-clean-plugin ${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app ${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM api-debug.js iemApp.js iem.jsp Util.js ${basedir}/jsBuild/ext-4.2.1.883/build/IEM ${basedir}/src/main/webapp all-classes.js iemc.jsp org.apache.maven.plugins maven-antrun-plugin 1.7 modify iem.jsp for build initialize run Creating a Production Build with Sencha Command generate-sources run copy sencha cmd output files and bankup the original jsp file process-sources run modify generated js file process-sources ]]> run ant-contrib ant-contrib 20020829
4. Frequent build failure error
1) Try not code in the following way
Ext.define(‘YourClass’,{
name:’hello’,
store: Ext.create(‘StoreClass’);
});
Try to instantiate store in initComponent method
2) Missed some required class
3) Required class is in all-classes.js, but its definition after its usage
- 查看图片附件