In ReactSpa template, change vendor bundle to be a prebuilt DLL (for faster builds)

SteveSandersonMS · SteveSandersonMS · commit 60bcbc4d12c0 · 2016-03-01T13:18:35.000Z
diff --git a/templates/ReactSpa/Views/Shared/_Layout.cshtml b/templates/ReactSpa/Views/Shared/_Layout.cshtml
@@ -5,8 +5,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>@ViewData["Title"] - WebApplicationBasic</title>
 
+        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
         <environment names="Staging,Production">
-            <link rel="stylesheet" href="~/dist/site.css" />
+            <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
         </environment>
     </head>
     <body>
diff --git a/templates/ReactSpa/project.json b/templates/ReactSpa/project.json
@@ -43,8 +43,11 @@
     "**.vspscc"
   ],
   "scripts": {
-    "prepublish": [
+    "prepare": [
       "npm install",
+      "webpack --config webpack.config.vendor.js"
+    ],
+    "prepublish": [
       "webpack"
     ]
   }
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js
@@ -12,22 +12,21 @@ module.exports = merge({
     module: {
         loaders: [
             { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
-            { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader' },
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
+            { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader' }
         ]
     },
     entry: {
         main: ['./ClientApp/boot.tsx'],
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery']
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),
         filename: '[name].js',
         publicPath: '/dist/'
     },
     plugins: [
-        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
-        new webpack.optimize.OccurenceOrderPlugin(),
-        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') // Moves vendor content out of other bundles
+        new webpack.DllReferencePlugin({
+            context: __dirname,
+            manifest: require('./wwwroot/dist/vendor-manifest.json')
+        })
     ]
 }, isDevelopment ? devConfig : prodConfig);
diff --git a/templates/ReactSpa/webpack.config.prod.js b/templates/ReactSpa/webpack.config.prod.js
@@ -10,6 +10,7 @@ module.exports = {
     },
     plugins: [
         extractCSS,
+        new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({ minimize: true })
     ]
 };
diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js
@@ -0,0 +1,33 @@
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var extractCSS = new ExtractTextPlugin('vendor.css');
+
+module.exports = {
+    resolve: {
+        extensions: [ '', '.js' ]
+    },
+    module: {
+        loaders: [
+            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
+            { test: /\.css/, loader: extractCSS.extract(['css']) }
+        ]
+    },
+    entry: {
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
+    },
+    output: {
+        path: path.join(__dirname, 'wwwroot', 'dist'),
+        filename: '[name].js',
+        library: '[name]_[hash]',
+    },
+    plugins: [
+        extractCSS,
+        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.DllPlugin({
+            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+            name: '[name]_[hash]'
+        })
+    ]
+};

Original file line number	Diff line number	Diff line change
`@@ -43,8 +43,11 @@`
`43`	`43`	`"**.vspscc"`
`44`	`44`	`],`
`45`	`45`	`"scripts": {`
`46`		`- "prepublish": [`
	`46`	`+ "prepare": [`
`47`	`47`	`"npm install",`
	`48`	`+ "webpack --config webpack.config.vendor.js"`
	`49`	`+ ],`
	`50`	`+ "prepublish": [`
`48`	`51`	`"webpack"`
`49`	`52`	`]`
`50`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ module.exports = {`
`10`	`10`	`},`
`11`	`11`	`plugins: [`
`12`	`12`	`extractCSS,`
	`13`	`+ new webpack.optimize.OccurenceOrderPlugin(),`
`13`	`14`	`new webpack.optimize.UglifyJsPlugin({ minimize: true })`
`14`	`15`	`]`
`15`	`16`	`};`