2016

September

August

June

2015

September

August

June

January

2014

December

July

April

March

February

2013

December

August

July

March

2012

December

August

Minifying an angular app 10 Sep 2015

Hello,

This is something you will probably have to look at by the end of your project :

To do so I have used the minify-maven-plugin.

In my project I had to run this plugin after the sass compilation (need the css files to be there to compact them !)

Under the hood it uses 2 things :

After executing the plugin I end up with a file called app.min.js and style.min.css that each contain all the js minified and all the css minified !

Note that we followed the advice of this article on how to structure our app.

#Angular impact

In order to be able to minify your angular code you have to declare your controller, factories etc in a certain manner. The goal is to avoid your injected dependencies to be renamed by the minifier process.

See this note on minification

To sum up you have to declare your controller like this

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

#HTML pages

In order to use app.min.js and style.min.css I had to change the index.html page of our application to reference those new files. Problem is that those 2 files are generated inside the target/APPNAME-VERSION directory. Thus they are not usable when using mvn tomcat:run. I could have done some ugly hacks in the pom to copy those file in the src directory (that is used by tomcat when running mvn tomcat:run) but this is really too ugly.

The solution I came up with is simply to have 2 index pages one page for production : index.html one page for dev : indexdev.html

Inside the indexdev.html I reference all the js files and css files. It enables debug. The only thing is to remember to type the right url in the browser when starting the application in dev mode.

For production I believe you can exclude the indexdev.html when generating your war in maven (not tried yet).

Index.html

<!-- *** Production css *** -->
<link rel="stylesheet" href="assets/css/style.min.css">

<!-- Js dependencies -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- *** Production js *** -->
<script src="app/app.min.js"></script>

Indexdev.html

<!-- *** Production css *** -->
<!-- <link rel="stylesheet" href="assets/css/style.css"> -->

<!-- *** Debug css *** -->
<link rel="stylesheet" href="assets/css/mycss1.css">
<link rel="stylesheet" href="assets/css/mycss2.css">
<link rel="stylesheet" href="assets/css/modified-bootstrap.css">


<!-- Js dependencies -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>


<!-- *** Production js *** -->
<!-- <script src="app/app.min.js"></script> -->

<!-- *** Debug js *** -->
<script src="app/aa1.app.routes.js"></script>
<script src="app/aa2.app.module.js"></script>
<script src="app/shared/header/headerDirective.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/about/aboutController.js"></script>
<script src="app/shared/clients/helloClient.js"></script>

#POM

Here is an extract of my pom.xml

<plugin>
   <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>${minify-maven-plugin.version}</version>
    <executions>
      <execution>
        <id>default-minify</id>
        <goals>
         <goal>minify</goal>
        </goals>
        <!-- To be able to use it in mvn tomcat:run, will run after sass 
          compile -->
        <phase>compile</phase>
        <!-- <phase>package</phase> -->
        <configuration>
          <charset>UTF-8</charset>
          <cssSourceDir>assets/css</cssSourceDir>
          <cssFinalFile>style.css</cssFinalFile>
          <jsSourceDir>app</jsSourceDir>
          <jsFinalFile>app.js</jsFinalFile>
          <jsEngine>CLOSURE</jsEngine>
          <closureLanguage>ECMASCRIPT5</closureLanguage>
          <closureAngularPass>true</closureAngularPass>
          <cssSourceIncludes>
            <cssSourceInclude>**/*.css</cssSourceInclude>
          </cssSourceIncludes>
          <jsSourceIncludes>
            <jsSourceInclude>**/*.js</jsSourceInclude>
          </jsSourceIncludes>
        </configuration>
      </execution>
    </executions>
  </plugin>

Hope it will help you !

comments powered by Disqus
This site was designed using jekyll, bootstrap, fontawesome, google analytics, disqus and is hosted on github. All for free so thank you!