I'm making a website using Angular2 and I'm having what i suppose is an issue. On the first load of my angular page, SystemJS is making more than 500 hundred requests to retrieve every Angular2 file in angular2/src directory. In total, the first load downloads more than 4MB and it takes more than 14 seconds to start.
My index.html does the following scripts includes:
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>
And my systemJs initialization code looks like this:
<script>
System.config({
defaultJSExtensions: true,
paths: {
'*': 'libs/*',
'app/*': 'app/*'
},
packageConfigPaths: ['libs/*/package.json'],
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
My public folder has the following structure:
.
├── img
├── styles
├── app
├── libs
| └── angular2
| └── systemjs
| └── rxjs
| └── jquery
| └── lodash
| └── bootstrap
└── index.html
A couple of screenshots of some of the js files that are being requested:
Is there a way to avoid all of those requests?
I had the exact same problem, was actually looking at this post for an answer. Here is what I did to solve the problem.
Modify your project to use webpack. Follow this short tutorial:
Angular2 QuickStart SystemJS To Webpack
This method will give you a single javascript file however it is quite large (my project file was over 5MB) and needs to be minified. To do this I installed webpack globaly:npm install webpack -g. Once installed, run webpack -p from your apps root directory. This brought my file size down to about 700KB
From 20 seconds and 350 requests down to 3 seconds and 7 requests.
I see you already have a response, which is good of course.
BUT for those who want to use systemjs (like I also do), and not go to webpack, you can still bundle the files. However, it does involve using another tool also (I use gulp).
So... you would have the folowing systemjs config (not in the html, but in a separate file - let's call it "system.config.js"):
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'dist/app', // this is where your transpiled files live
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', // this is something new since angular2 rc.0, don't know what it does
'#angular': 'node_modules/#angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
//'#angular/router', // I still use "router-deprecated", haven't yet modified my code to use the new router that came with rc.0
'#angular/router-deprecated',
'#angular/http',
'#angular/testing',
'#angular/upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Then, in your gulpfile.js you would build a bundle like this (using the info from system.config.js and tsconfig.json files):
var gulp = require('gulp'),
path = require('path'),
Builder = require('systemjs-builder'),
ts = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var appDev = 'dev/app'; // where your ts files are, whatever the folder structure in this folder, it will be recreated in the below 'dist/app' folder
var appProd = 'dist/app';
/** first transpile your ts files */
gulp.task('ts', () => {
return gulp.src(appDev + '/**/*.ts')
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(ts(tsProject))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(appProd));
});
/** then bundle */
gulp.task('bundle', function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist/system.config.js');
/*
the parameters of the below buildStatic() method are:
- your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
- the output (file into which it would output the bundled code)
- options {}
*/
return builder
.buildStatic(appProd + '/boot.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
/** this runs the above in order. uses gulp4 */
gulp.task('build', gulp.series(['ts', 'bundle']));
So, when running "gulp build", you will get the "bundle.js" file with everything you need.
Sure, you also need a few more packages for this gulp bundle task to work:
npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder
Also, make sure that in your tsconfig.json you have "module":"commonjs".
Here is my tsconfig.json which is used in my 'ts' gulp task:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Then, in your html file you only need to include this:
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/app/bundle.js"></script>
And that's it... I got from 600 requests, 4mb in about 5 seconds... to 20 requests, 1.4mb in 1.6 seconds (local development machine). But these 20 requests ~1.4mb in 1.6 seconds also include some other js and css that the admin theme came with plus a few html templates that get required on the first load, I prefer to use external templates - templateUrl: '', instead of inline ones, written in my component.ts file.
Sure, for an app that would have millions of users, this still wouldn't be enough. Also server-side rendering for initial load and cache system should be implemented, I actually managed to do that with angular universal, but on Angular2 beta (took about 200-240 milliseconds to load the initial render of the same admin app that above takes 1.6 seconds - I know: WOW!). Now it's incompatible since Angular2 RC came out, but I'm sure the guys doing universal will get it up to speed soon, specially since ng-conf is coming up. Plus, they're also planing to make Angular Universal for PHP, ASP and a few other - right now it's only for Nodejs.
Edit:
Actually, I've just found out that on NG-CONF they said Angular Universal already supports ASP (but it doesn't support Angular2 > beta.15 :)) ... but let's give them some time, RC just came out a few days ago
I think that your question is related to this one:
My angular 2 app takes a long time to load for first time users, I need help to speed it up
To have something ready for production (and speed it up), you need to package it.
I mean transpiling all files into JavaScript ones and concat them the same way Angular2 does for example. This way you will have several modules contained into a single JS file. This way you will reduce the number of HTTP calls to load your application code into the browser.
I found a simple solution, using browserify & uglifyjs on mgechev's angular2-seed repository
Here's my version:
pacakge.json:
{
...
"scripts": {
"build_prod": "npm run clean && npm run browserify",
"clean": "del /S/Q public\\dist",
"browserify": "browserify -s main public/YourMainModule.js > public/dist/bundle.js && npm run minify",
"minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js"
},
...
"devDependencies": {
"browserify": "^13.0.1",
"typescript": "^1.9.0-dev.20160625-1.0",
"typings": "1.0.4",
"uglifyjs": "^2.4.10"
}
}
Build your project.
Run: npm run build_prod
It'll create bundle.js & bundle.min.js under public\dist directory.
Edit your index.html file:
Instead of running System.import('YourMainModule')... ,
add <script src="/dist/bundle.min.js"></script>
On the first load of my angular page, systemjs is making more than 500 hundred requests to retrieve every angular2 file in angular2/src directory. In total, the first load downloads more than 4mb and it takes more than 14s to start.
The SystemJs workflows are fairly new and don't have enough research in them for best deployment.
Suggest going back to commonjs + webpack. More : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html
Here is an example : https://github.com/AngularClass/angular2-webpack-starter
#FreeBird72 Your answer is awesome.
If you want to use SystemJS for development and speed up the production server like I do. Check this out.
NOTE: Only import the components that you use, DO NOT import from the whole package.
Eg: If you want to use Modal from ng2-bootstrap.
import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";
Instead of:
import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";
This will import the modal component instead of the whole ng2-bootstrap
Then follow the answer from #FreeBird72
Add this package.json
{
...
"scripts": {
...
"prod": "npm run tsc && npm run browserify",
"browserify": "browserify -s main dist/main.js > dist/bundle.js && npm run minify",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
...
},
"devDependencies": {
...
"browserify": "^13.0.1",
"uglifyjs": "^2.4.10",
...
}
...
}
Then you can npm run tsc on development and npm run prod on production server
Also remove System.import(.... from your index.html and change it to <script src="/dist/bundle.min.js"></script>
If you want to stick with SystemJS, you can bundle your app with JSPM. I've had good success with this so far, using JSPM's bundle-sfx command to make single JS files for Angular 2 apps.
There's some useful information in this Gist, and there's a seed project.
I am using AG2 RC version
While using MrCroft's solution with systemjs-builder, i was hitting a lot of issues like:
error TS2304: Cannot find name 'Map'
error TS2304: Cannot find name 'Promise'...
After many tries, i added:
///<reference path="../../typings/index.d.ts" />
into my boot.ts and now I got my bundle file compiled.
The Angular command line interface now supports bundling (with tree-shaking to strip out unused code from imports), minification, and ahead-of-time template compilation, which not only hugely minimises the number of requests made, but also makes the bundle very small. It uses WebPack underneath.
It's incredibly easy to make production builds with it:
ng build --prod --aot
https://github.com/angular/angular-cli
Related
I have built a library that I want to use in a Next.JS project. Within this library a certain dependency is using an import via a string passed into a require statement within the source code where the import is taking place. This is causing webpack to not recognize the import. I don't want to change code within any node_modules as this is not a preferred approach but how can I ensure that my project using the library I built is able to compile and run?
Within file_using_string_passed_into_require_to_get_import.js:
let importName = "./potential_import_A.js"
if(condition){
importName = "./potential_import_B.js"
}
module.exports = require(importName)
This is the folder structure:
Project/
| node_modules
| my-library
| node_modules
| library-dependency
| file_using_string_passed_into_require_to_get_import.js
| potential_import_A.js
| potential_import_B.js
To create a local (unpublished) library package
Create a 'my-library' folder (outside your current project dir).
Do npm init (Folder must include the 'package.json' )
Include source code (potential_import_A), exporting any desired functions.
In the actual project folder:
cd into the folder of the project that needs to use your library.
Run npm install --save local/path/to/my-library.
The --save will add the package to your dependencies in the project's package.json file, as it does with 3rd party published packages. It will also add a copy of the source code to the node modules folder of the project, as always.
Importing your new library:
import/require the package as you would normally, from any project.
For example
import { myFunction } from "my-library"
I got it to work by excluding node_modules from the webpack build. Since I am using Next.JS this is within my next.config.js
const nodeExternals = require('webpack-node-externals');
module.exports = {
webpack: (
config,
{
buildId, dev, isServer, defaultLoaders, nextRuntime, webpack,
},
) => {
if (isServer) {
config.target = 'node';
config.node = {
__dirname: true,
global: true,
__filename: true,
};
config.externals = [nodeExternals()], // in order to ignore all modules in node_modules folder
config.externalsPresets = {
node: true, // in order to ignore built-in modules like path, fs, etc.
};
}
return config;
},
};
I have some resources which are getting generated on runtime or on build for example scripts, CSS, etc.
The file format is something like this main.min.63716273681.js and similarly for other resources as well.
Unfortunately, I cannot use sw-precache library or anything integrated with my build.
How can I precache those resources, Is it possible to do it using regex?
Note: The question is about precaching the resource and resources are getting generated by AEM(Adobe experience manager)
install webpack-manifest-plugin and import at the top of your webpack config file
const ManifestPlugin = require('webpack-manifest-plugin');
use the below code in your webpack plugin section this will generate a file name asset-manifest.json with all the assets that are build by webpack
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: your public path here,
}),
it will generate file having content like below
// asset-manifest.json
{
"files": {
"about.js": "/static/js/about.bc816d03.chunk.js",
"about.js.map": "/static/js/about.bc816d03.chunk.js.map",
"dashboard.js": "/static/js/dashboard.f180c270.chunk.js",
"dashboard.js.map": "/static/js/dashboard.f180c270.chunk.js.map",
"homepage.js": "/static/js/homepage.4dd0316c.chunk.js",
"homepage.js.map": "/static/js/homepage.4dd0316c.chunk.js.map",
"login.js": "/static/js/login.1b8cf466.chunk.js",
"login.js.map": "/static/js/login.1b8cf466.chunk.js.map",
"logout.js": "/static/js/logout.ac3c5758.chunk.js",
"logout.js.map": "/static/js/logout.ac3c5758.chunk.js.map",
"main.css": "/static/css/main.977b6895.chunk.css",
"main.js": "/static/js/main.a65a1d5d.chunk.js",
"main.js.map": "/static/js/main.a65a1d5d.chunk.js.map",
"profile.js": "/static/js/profile.20ae3dae.chunk.js",
"profile.js.map": "/static/js/profile.20ae3dae.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.ad8b0a50.js",
"runtime-main.js.map": "/static/js/runtime-main.ad8b0a50.js.map",
"static/js/8.796ce7e3.chunk.js": "/static/js/8.796ce7e3.chunk.js",
"static/js/8.796ce7e3.chunk.js.map": "/static/js/8.796ce7e3.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.e770a629726af82e25b547dd941bae89.js": "/precache-manifest.e770a629726af82e25b547dd941bae89.js",
"service-worker.js": "/service-worker.js",
"static/css/main.977b6895.chunk.css.map": "/static/css/main.977b6895.chunk.css.map",
"static/js/8.796ce7e3.chunk.js.LICENSE.txt": "/static/js/8.796ce7e3.chunk.js.LICENSE.txt",
"static/media/arvidsson.jpg": "/static/media/arvidsson.4d6f8e0d.jpg",
"static/media/logo.jpg": "/static/media/logo.8caa15b8.jpg",
"static/media/pekka.jpg": "/static/media/pekka.1eab475c.jpg"
},
"entrypoints": [
"static/js/runtime-main.ad8b0a50.js",
"static/js/8.796ce7e3.chunk.js",
"static/css/main.977b6895.chunk.css",
"static/js/main.a65a1d5d.chunk.js"
]
}
you can read asset-manifest.json file and take the files object and iterate and check the key having .js in the end.
Hope this will answer your question.
I'm performing Bundling and Minification in ASP.NET Core 2.0 MVC and I've run into an issue with the minification taking place when it shouldn't. In my page I have the following script tag:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous"
asp-fallback-test="window.jQuery"
asp-fallback-src="~/js/jquery.min.js">
</script>
In my bundleconfig.json I have the following section:
{
"outputFileName": "wwwroot/js/jquery.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js"
],
"minify": {
"enabled": false
}
}
The problem is that the ~/js/jquery.min.js file is losing its trailing newline character when it's transformed by this bundling/minification process which makes the expected hash of the file no longer match. As a workaround I can specify 2 hashes for the integrity value to support a file with or without the newline like so:
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha384-I7/UTpkJas2maMjJpGmrvEgQecqO8Dta/9Wwh+cQrH6Jj984WRRFhWg4MV/oTkIW"
But that's less efficient than just making sure the minification doesn't touch this file. How can I stop this newline from being trimmed?
Try with following configuration :
//1. by default outputMode is singleLine which removes new lines and output on a single line. We are setting it to none.
{
"outputFileName": "wwwroot/js/jquery.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js"
],
"minify": {
"enabled": false,
outputMode: "none"
}
}
//Alternatively, outputMode = "multipleLines" should work with a indentSize of 0 as well.
//In this mode , output file has each line indented by specified indentSize
{
"outputFileName": "wwwroot/js/jquery.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js"
],
"minify": {
"enabled": false,
outputMode: "multipleLines",
indentSize: 0
}
}
You can read about available settings for javascript minifier here
I find the default minification system somewhat limited and for things like excluding files I usually end up using a task runner like Gulp instead.
So here is how to do what you want using gulp:
Adding npm support
First add support for npm packages by adding a package.json file if you don't already have it, inside the solution explorer, right click on your project name, then, add new item and search for npm configuration file.
Inside package.json add the following required gulp dependencies as well as any other client side library you want to use, for example, jquery, bootstrap, etc.:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"gulp": "3.9.1",
"gulp-concat": "2.6.1",
"gulp-cssmin": "0.2.0",
"gulp-uglify": "3.0.0",
"gulp-filter": "5.1.0",
"gulp-watch": "5.0.0",
"rimraf": "2.6.2",
"jquery": "3.3.1",
"bootstrap": "4.1.1",
"popper.js": "1.14.3"
}
}
Once you save the file a folder will be added to your project directory called node_modules (this folder is not visible unless you activate "Show all files" on the Solution Explorer toolbar.
This folder contains all the libraries and their dependencies, we will use gulp to copy the libraries you want to include from node_modules to your wwwroot folder.
Setting up Gulp
Create two other folders in the root of your project, name one Styles and the other one Scripts.
You can use these folders for your application scripts and style-sheets, we will use gulp to combine, minify and copy to the wwwroot folder all these resources.
The idea is to avoid using the wwwroot folder directly so you have full control of what you expose and how when you publish your Website.
Add a javascript file to the root of your project and name it gulpfile.js
You can use gulp to create different tasks that can be executed automatically before or after build, when cleaning the project, when the project is open in Visual Studio, etc...
For this example I will create the following tasks:
clean:js to clear all files in your wwwroot/js folder.
clean:css to clear all css files in your wwwroot/css folder.
clean to run clean:js and clean:css one after the other.
watch to watch for changes in your application and stylesheet files so whenever you save them, the resources are regenerated in wwwroot.
dev:js to generate wwwroot javascript resources during development.
dev:css to generate wwwroot css resources during development.
dev to execute dev:js and dev:css one after the other.
min:js to generate wwwroot javascript resources during production.
min:css to generate wwwroot css resources during production.
min to execute min:js and min:css one after the other.
Gulp has a lot of plugins, you need to specify which ones are required for your project, to do that, add the following at the beginning of your script:
/// <binding BeforeBuild='clean, dev, min' Clean='clean' ProjectOpened='watch' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
gulpFilter = require("gulp-filter");
As you may deduct from the name, the gulp-filter plugin is what we will use to exclude files from the minification process.
Now, you need to set up some general paths:
var paths = {
webroot: "./wwwroot/",
scripts: "./Scripts/",
styles: "./Styles/",
node_modules: "./node_modules/"
};
//The following paths will be used to look for any js and css file in your Script and Styles folder or any subfolder inside them
paths.scripts = paths.scripts + "**/*.js";
paths.styles = paths.styles + "**/*.css";
Note: if you need to specify the order of any script inside these folders, you can do as follows:
paths.scripts = [paths.scripts + "/somescript.js", paths.scripts + "**/*.js"];
paths.styles = [paths.styles + "/somecss.css", paths.styles + "**/*.css"];
Next, define the paths to the vendor scripts which are inside the node_modules folder:
paths.vendorJs = [paths.node_modules + "jquery/dist/jquery.js",
paths.node_modules + "popper.js/dist/umd/popper.js",
paths.node_modules + "bootstrap/dist/js/bootstrap.js"];
paths.vendorCss = [paths.node_modules + "bootstrap/dist/css/bootstrap.css"];
paths.minVendorJs = [paths.node_modules + "jquery/dist/jquery.min.js",
paths.node_modules + "jquery/dist/umd/popper.min.js",
paths.node_modules + "bootstrap/dist/js/bootstrap.min.js"];
paths.minVendorCss = [paths.node_modules + "bootstrap/dist/css/bootstrap.min.css"];
The idea is to avoid minification for any file that is specified in paths.minVendorJs as they are already minified. The following path will allow you to minify any specific vendor file if you need to do so:
paths.vendorCssToMinify = [paths.node_modules + "perfect-scrollbar/css/perfect-scrollbar.css"]
Then, we define the output files that will be generated, for this example, only one script and one style-sheet will be generated that contains all the application files as well as all vendor files combined within them:
paths.concatJsDest = paths.webroot + "js/application.js";
paths.concatCssDest = paths.webroot + "css/application.css";
paths.minConcatJsDest = paths.webroot + "js/application.min.js";
paths.minConcatCssDest = paths.webroot + "css/application.min.css";
Finally, we define each task:
gulp.task("clean:js", function (cb) {
rimraf(paths.webroot + "js/**/*.js", cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.webroot + "css/**/*.css", cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task('watch', function () {
gulp.watch(paths.styles, ['dev:css', 'clean:css']);
gulp.watch(paths.scripts, ['dev:js', 'clean:js', ]);
});
gulp.task("dev:js", function () {
return gulp.src(paths.vendorJs.concat(paths.scripts))
.pipe(concat(paths.concatJsDest))
.pipe(gulp.dest('.'));
});
gulp.task("dev:css", function () {
return gulp.src(paths.vendorCss.concat(paths.styles))
.pipe(concat(paths.concatCssDest))
.pipe(gulp.dest('.'));
});
gulp.task("min:js", function () {
// Files to skip from minification.
var filter = gulpFilter(paths.minVendorJs, {
restore: true
});
return gulp.src(paths.minVendorJs.concat(paths.scripts))
.pipe(filter)
.pipe(uglify())
.pipe(filter.restore)
.pipe(concat(paths.minConcatJsDest))
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
// Files to skip from minification.
var filter = gulpFilter(paths.minVendorCss, {
restore: true
});
return gulp.src(paths.minVendorCss.concat(paths.vendorCssToMinify).concat(paths.styles))
.pipe(filter)
.pipe(cssmin())
.pipe(filter.restore)
.pipe(concat(paths.minConcatCssDest))
.pipe(gulp.dest("."));
});
gulp.task("dev", ["dev:js", "dev:css"]);
gulp.task("min", ["min:js", "min:css"]);
And that's it!
To test the configuration, right click on your gulpfile.js file and select Task Runner Explorer. If everything went correctly, you should see something like this:
You can run the tasks by double clicking on them.
You can use the generated resources in your razor views like this:
<environment include="Development">
<link rel="stylesheet" href="~/css/application.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/application.min.css" />
</environment>
And
<environment include="Development">
<script src="~/js/application.js"></script>
</environment>
<environment exclude="Development">
<script src="~/js/application.min.js"></script>
</environment>
If you need to compile LESS or SASS files you need to use the corresponding Gulp plugin, see here for an example.
More information about using Gulp in ASP.NET Core: https://learn.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.0
Pulling my hair out here looking for a simple solution to share code, required via NPM, across multiple Browserify or Webpack bundles. Thinking, is there such a thing as a file "bridge"?
This isn't due to compile time (I'm aware of watchify) but rather the desire to extract out all of my vendor specific libs into vendor.js so to keep my app.js filesize down and to not crash the browser with massive sourcemaps. Plus, I find it way cleaner should the need to view the compiled js arise. And so:
// vendor.js
require('react');
require('lodash');
require('other-npm-module');
require('another-npm-module');
Its very important that the code be loaded from NPM as opposed to Bower, or saved into some 'vendor' directory in order to be imported via a relative path and identified via a shim. I'd like to keep every library reference pulled via NPM except for my actual application source.
In app.js I keep all of my sourcecode, and via the externals array, exclude vendor libraries listed above from compilation:
// app.js
var React = require('react');
var _ = require('lodash');
var Component = React.createClass()
// ...
And then in index.html, I require both files
// index.html
<script src='vendor.js'></script>
<script src='app.js'></script>
Using Browserify or Webpack, how can I make it so that app.js can "see" into those module loaded via npm? I'm aware of creating a bundle with externals and then referencing the direct file (in, say, node_modules) via an alias, but I'm hoping to find a solution that is more automatic and less "Require.js" like.
Basically, I'm wondering if it is possible to bridge the two so that app.js can look inside vendor.js in order to resolve dependencies. This seems like a simple, straightforward operation but I can't seem to find an answer anywhere on this wide, wide web.
Thanks!
Listing all the vendor files/modules and using CommonChunkPlugin is indeed the recommended way. This gets pretty tedious though, and error prone.
Consider these NPM modules: fastclick and mprogress. Since they have not adopted the CommonJS module format, you need to give webpack a hand, like this:
require('imports?define=>false!fastclick')(document.body);
require('mprogress/mprogress.min.css');
var Mprogress = require('mprogress/mprogress.min.js'),
Now assuming you would want both fastclick and mprogress in your vendor chunk, you would probably try this:
module.exports = {
entry: {
app: "./app.js",
vendor: ["fastclick", "mprogress", ...]
Alas, it doesn't work. You need to match the calls to require():
module.exports = {
entry: {
app: "./app.js",
vendor: [
"imports?define=>false!fastclick",
"mprogress/mprogress.min.css",
"mprogress/mprogress.min.js",
...]
It gets old, even with some resolve.alias trickery. Here is my workaround. CommonChunkPlugin lets you specify a callback that will return whether or not you want a module to be included in the vendor chunk. If your own source code is in a specific src directory, and the rest is in the node_modules directory, just reject the modules based on their path:
var node_modules_dir = path.join(__dirname, 'node_modules'),
app_dir = path.join(__dirname, 'src');
module.exports = {
entry: {
app: "./app.js",
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor",
/* filename= */"vendor.bundle.js"
function (module, count) {
return module.resource && module.resource.indexOf(app_dir) === -1;
}
)
]
};
Where module.resource is the path to the module being considered. You could also do the opposite, and include only the module if it is inside node_modules_dir, i.e.:
return module.resource && module.resource.indexOf(node_modules_dir) === 0;
but in my situation, I'd rather say: "put everything that is not in my source source tree in a vendor chunk".
Hope that helps.
With webpack you'd use multiple entry points and the CommonChunkPlugin.
Taken from the webpack docs:
To split your app into 2 files, say app.js and vendor.js, you can require the vendor files in vendor.js. Then pass this name to the CommonChunkPlugin as shown below.
module.exports = {
entry: {
app: "./app.js",
vendor: ["jquery", "underscore", ...],
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor",
/* filename= */"vendor.bundle.js"
)
]
};
This will remove all modules in the vendor chunk from the app chunk. The bundle.js will now contain just your app code, without any of it’s dependencies. These are in vendor.bundle.js.
In your HTML page load vendor.bundle.js before bundle.js.
<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>
// vendor anything coming from node_modules
minChunks: module => /node_modules/.test(module.resource)
Source: https://github.com/webpack/webpack/issues/2372#issuecomment-213149173
Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.
I'm currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.
I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.
As for the minifying or even concatenating CSS, I have been unable to do this as of yet!
In terms of grunt CSS modules I have tried using consolidate-css, grunt-css & cssmin but to no avail. Could not get my head around how to use them!
My directory structure is as follows (being a typical node.js application):
app.js
grunt.js
/public/index.html
/public/css/[various css files]
/public/js/[various javascript files]
Here is what my grunt.js file currently looks like in the root folder of my application:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
concat: {
dist: {
src: 'public/js/*.js',
dest: 'public/js/concat.js'
}
},
min: {
dist: {
src: 'public/js/concat.js',
dest: 'public/js/concat.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
node: true
},
globals: {
exports: true,
module: false
}
},
uglify: {}
});
// Default task.
grunt.registerTask('default', 'concat min');
};
So just to summarise I need help with two questions:
How to concatenate and minify all my css files under the folder /public/css/ into one file, say main.min.css
Why does grunt.js keep on appending to the concatenated and minified javascript files concat.js and concat.min.js under /public/js/ instead of overwriting them each time the command grunt is run?
Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x
Grunt.js has moved to a new structure in Grunt 0.4.x (the file is now called Gruntfile.js). Please see my open source project Grunt.js Skeleton for help with setting up a build process for Grunt 1.x.
Moving from Grunt 0.4.x to Grunt 1.x should not introduce many major changes.
concat.js is being included in the concat task's source files public/js/*.js. You could have a task that removes concat.js (if the file exists) before concatenating again, pass an array to explicitly define which files you want to concatenate and their order, or change the structure of your project.
If doing the latter, you could put all your sources under ./src and your built files under ./dest
src
├── css
│ ├── 1.css
│ ├── 2.css
│ └── 3.css
└── js
├── 1.js
├── 2.js
└── 3.js
Then set up your concat task
concat: {
js: {
src: 'src/js/*.js',
dest: 'dest/js/concat.js'
},
css: {
src: 'src/css/*.css',
dest: 'dest/css/concat.css'
}
},
Your min task
min: {
js: {
src: 'dest/js/concat.js',
dest: 'dest/js/concat.min.js'
}
},
The build-in min task uses UglifyJS, so you need a replacement. I found grunt-css to be pretty good. After installing it, load it into your grunt file
grunt.loadNpmTasks('grunt-css');
And then set it up
cssmin: {
css:{
src: 'dest/css/concat.css',
dest: 'dest/css/concat.min.css'
}
}
Notice that the usage is similar to the built-in min.
Change your default task to
grunt.registerTask('default', 'concat min cssmin');
Now, running grunt will produce the results you want.
dest
├── css
│ ├── concat.css
│ └── concat.min.css
└── js
├── concat.js
└── concat.min.js
I want to mention here a very, VERY, interesting technique that is being used in huge projects like jQuery and Modernizr for concatenate things.
Both of this projects are entirely developed with requirejs modules (you can see that in their github repos) and then they use the requirejs optimizer as a very smart concatenator. The interesting thing is that, as you can see, nor jQuery neither Modernizr needs on requirejs to work, and this happen because they erase the requirejs syntatic ritual in order to get rid of requirejs in their code. So they end up with a standalone library that was developed with requirejs modules! Thanks to this they are able to perform cutsom builds of their libraries, among other advantages.
For all those interested in concatenation with the requirejs optimizer, check out this post
Also there is a small tool that abstracts all the boilerplate of the process: AlbanilJS
I agree with above answer. But here is another way of CSS compression.
You can concat your CSS by using YUI compressor:
module.exports = function(grunt) {
var exec = require('child_process').exec;
grunt.registerTask('cssmin', function() {
var cmd = 'java -jar -Xss2048k '
+ __dirname + '/../yuicompressor-2.4.7.jar --type css '
+ grunt.template.process('/css/style.css') + ' -o '
+ grunt.template.process('/css/style.min.css')
exec(cmd, function(err, stdout, stderr) {
if(err) throw err;
});
});
};
You don't need to add the concat package, you can do this via cssmin like this:
cssmin : {
options: {
keepSpecialComments: 0
},
minify : {
expand : true,
cwd : '/library/css',
src : ['*.css', '!*.min.css'],
dest : '/library/css',
ext : '.min.css'
},
combine : {
files: {
'/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
}
}
}
And for js, use uglify like this:
uglify: {
my_target: {
files: {
'/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
}
}
}
I think may be more automatic, grunt task usemin take care to do all this jobs for you, only need some configuration:
https://stackoverflow.com/a/33481683/1897196