Skip to content

Commit 4dcf63d

Browse files
SteveSandersonMSSteveSandersonMS
committed
Change Angular2 template to use vendor DLL too. Temporarily disabled server-side prerendering.
1 parent 2c3f29d commit 4dcf63d

9 files changed

Lines changed: 62 additions & 19 deletions

File tree

‎templates/Angular2Spa/ClientApp/boot-client.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import 'bootstrap/dist/css/bootstrap.css';
1+
import 'angular2/bundles/angular2-polyfills.js';
22
import './styles/site.css';
33

44
import { bootstrap } from 'angular2/platform/browser';

‎templates/Angular2Spa/Views/Home/Index.cshtml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
ViewData["Title"] = "Home Page";
33
}
44

5-
<app asp-prerender-module="ClientApp/boot-server"
6-
asp-prerender-webpack-config="webpack.config.js">Loading...</app>
5+
<app>Loading...</app>
76

7+
<script src="~/dist/vendor.js" asp-append-version="true"></script>
88
@section scripts {
99
<script src="~/dist/main.js" asp-append-version="true"></script>
1010
}

‎templates/Angular2Spa/Views/Shared/_Layout.cshtml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
<body>
1212
@RenderBody()
1313

14-
<script src="~/dist/vendor.js" asp-append-version="true"></script>
1514
@RenderSection("scripts", required: false)
1615
</body>
1716
</html>

‎templates/Angular2Spa/project.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,11 @@
4343
"**.vspscc"
4444
],
4545
"scripts": {
46-
"prepublish": [
46+
"prepare": [
4747
"npm install",
48+
"webpack --config webpack.config.vendor.js"
49+
],
50+
"prepublish": [
4851
"webpack"
4952
]
5053
}

‎templates/Angular2Spa/webpack.config.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ var path = require('path');
22
var webpack = require('webpack');
33
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
44
var ExtractTextPlugin = require('extract-text-webpack-plugin');
5-
var extractSiteCSS = new ExtractTextPlugin('styles.css');
6-
var extractVendorCSS = new ExtractTextPlugin('vendor.css');
5+
var extractCSS = new ExtractTextPlugin('styles.css');
76
var devConfig = require('./webpack.config.dev');
87
var prodConfig = require('./webpack.config.prod');
98
var isDevelopment = process.env.ASPNET_ENV === 'Development';
@@ -15,26 +14,23 @@ module.exports = merge({
1514
module: {
1615
loaders: [
1716
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' },
18-
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
1917
{ test: /\.html$/, loader: 'raw-loader' },
20-
{ test: /\.css/, include: /bootstrap/, loader: extractVendorCSS.extract(['css']) },
21-
{ test: /\.css/, exclude: /bootstrap/, loader: extractSiteCSS.extract(['css']) },
18+
{ test: /\.css/, loader: extractCSS.extract(['css']) }
2219
]
2320
},
2421
entry: {
25-
main: ['./ClientApp/boot-client.ts'],
26-
vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser']
22+
main: ['./ClientApp/boot-client.ts']
2723
},
2824
output: {
2925
path: path.join(__dirname, 'wwwroot', 'dist'),
3026
filename: '[name].js',
3127
publicPath: '/dist/'
3228
},
3329
plugins: [
34-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
35-
new webpack.optimize.OccurenceOrderPlugin(),
36-
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), // Moves vendor content out of other bundles
37-
extractSiteCSS,
38-
extractVendorCSS
30+
extractCSS,
31+
new webpack.DllReferencePlugin({
32+
context: __dirname,
33+
manifest: require('./wwwroot/dist/vendor-manifest.json')
34+
})
3935
]
4036
}, isDevelopment ? devConfig : prodConfig);

‎templates/Angular2Spa/webpack.config.prod.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ var webpack = require('webpack');
22

33
module.exports = {
44
plugins: [
5+
new webpack.optimize.OccurenceOrderPlugin(),
56
new webpack.optimize.UglifyJsPlugin({
7+
compress: { warnings: false },
68
minimize: true,
79
mangle: false // Due to https://github.com/angular/angular/issues/6678
810
})

‎templates/Angular2Spa/webpack.config.vendor.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
var extractCSS = new ExtractTextPlugin('vendor.css');
5+
var isDevelopment = process.env.ASPNET_ENV === 'Development';
6+
7+
module.exports = {
8+
resolve: {
9+
extensions: [ '', '.js' ]
10+
},
11+
module: {
12+
loaders: [
13+
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
14+
{ test: /\.css/, loader: extractCSS.extract(['css']) }
15+
]
16+
},
17+
entry: {
18+
vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser']
19+
},
20+
output: {
21+
path: path.join(__dirname, 'wwwroot', 'dist'),
22+
filename: '[name].js',
23+
library: '[name]_[hash]',
24+
},
25+
plugins: [
26+
extractCSS,
27+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
28+
new webpack.optimize.OccurenceOrderPlugin(),
29+
new webpack.DllPlugin({
30+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
31+
name: '[name]_[hash]'
32+
})
33+
].concat(isDevelopment ? [] : [
34+
new webpack.optimize.UglifyJsPlugin({
35+
compress: { warnings: false },
36+
minimize: true,
37+
mangle: true // Due to https://github.com/angular/angular/issues/6678
38+
})
39+
])
40+
};

‎templates/ReactSpa/webpack.config.prod.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ module.exports = {
1111
plugins: [
1212
extractCSS,
1313
new webpack.optimize.OccurenceOrderPlugin(),
14-
new webpack.optimize.UglifyJsPlugin({ minimize: true })
14+
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
1515
]
1616
};

‎templates/ReactSpa/webpack.config.vendor.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ var path = require('path');
22
var webpack = require('webpack');
33
var ExtractTextPlugin = require('extract-text-webpack-plugin');
44
var extractCSS = new ExtractTextPlugin('vendor.css');
5+
var isDevelopment = process.env.ASPNET_ENV === 'Development';
56

67
module.exports = {
78
resolve: {
@@ -29,5 +30,7 @@ module.exports = {
2930
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
3031
name: '[name]_[hash]'
3132
})
32-
]
33+
].concat(isDevelopment ? [] : [
34+
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
35+
])
3336
};

0 commit comments

Comments
 (0)