We do this using the gulp-wiredep plugin which we need to install first using: $ npm i gulp-wiredep -save-dev Although this step on its own doesn’t optimize the performance of our add-in it’s an important step in the optimization process that we will use later in the process. In the first step we will configure automatically wiring up bower dependencies in the index.html file. The commits in the repository correspond to the chapters in this article. The source code of a working sample using the optimized Gulp dist task is available on GitHub at. What if our add-in could look like this after running the dist task: Not to mention the bower dependencies referenced in the index.html file. If we run this task, we will see the different assets copied to the dist folder: even though the CSS and JavaScript files are minified they are still separate files that the application needs to download one by one. Office add-ins generated using the Yeoman Office Generator v0.6.3 have a dist Gulp task that minifies add-ins CSS and JavaScript files. In this example we will build an ADAL JS Taskpane Add-in. Let’s start by creating a new Office Add-in using the Yeoman Office Generator. The great news is, that using Gulp you can easily setup all of the above without any impact on your development process. setting far future expire header for static resources.merging and minifying CSS and JavaScript files (both specific to your application and from external libraries).Using a Gulp task you can optimize your Office web application or add-in by: If these files are relatively small and spread across different hosts, it will likely take longer for your application to start. When starting your application, often it needs to load the majority of these files first. Because the different pieces are kept in separate files, there is less risk of merge conflicts and in case of errors, it’s easier to locate where the particular piece of code is located.ĭepending on your application it might consists of a couple to a few dozen files varying from external libraries to the different pieces of the application. When developing solutions, separating the different components simplifies management and makes it easier for the different developers to work on the different parts of the application. Luckily using Gulp you can pretty easily improve your solution’s performance. What’s good for development however, isn’t necessarily leading to best performance. When building Office web applications and add-ins there comes the time where they are ready for release. Optimizing Office web apps and add-ins for release with Gulp
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |