optimize bundle removing vue from output

Author: marcosmoura

build/config.js

@@ -1,9 +1,10 @@
 import path from 'path';
 
 const config = {
-  projectRoot: path.resolve(__dirname, '../'),
-  rootPath: path.resolve(__dirname, '../dist'),
-  nodePath: path.resolve(__dirname, '../../node_modules'),
+  projectRoot: path.join(__dirname, '../'),
+  rootPath: path.join(__dirname, '../dist'),
+  nodePath: path.join(__dirname, '../node_modules'),
+  srcPath: 'src',
   docsPath: 'docs',
   indexPath: 'docs/index.html',
   publicPath: '/',

build/webpack/debug-lib.js

@@ -1,15 +1,23 @@
+import webpack from 'webpack';
 import merge from 'webpack-merge';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeJsPlugin from 'optimize-js-plugin';
 import prodConfig from './prod-lib';
 
 const devConfig = merge(prodConfig, {
   output: {
     filename: '[name].debug.js'
   },
-  devtool: 'source-map',
-  plugins: []
+  devtool: 'source-map'
 });
 
-devConfig.plugins.push(new ExtractTextPlugin('[name].css'));
+devConfig.plugins = [
+  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.optimize.DedupePlugin(),
+  new OptimizeJsPlugin({
+    sourceMap: false
+  }),
+  new ExtractTextPlugin('[name].css')
+];
 
 export default devConfig;

build/webpack/prod-docs.js

@@ -5,13 +5,15 @@ import autoprefixer from 'autoprefixer';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import OptimizeJsPlugin from 'optimize-js-plugin';
 import config from '../config';
 import baseConfig from './base';
 
+const docsPath = path.join(config.rootPath, config.docsPath);
 
 export default merge(baseConfig, {
   output: {
-    path: path.join(config.rootPath, 'docs'),
+    path: docsPath,
     publicPath: '',
     filename: '[name].[chunkhash:8].js',
     chunkFilename: '[name].[chunkhash:8].js'
@@ -28,28 +30,32 @@ export default merge(baseConfig, {
     ]
   },
   plugins: [
+    new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
-      }
+      },
+      comments: false
+    }),
+    new OptimizeJsPlugin({
+      sourceMap: false
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new ExtractTextPlugin('[name].[contenthash:8].css'),
     new CopyWebpackPlugin([
       {
         context: config.assetsPath,
         from: '**/*',
-        to: path.join(config.rootPath, 'docs', 'assets')
+        to: path.join(docsPath, 'assets')
       },
       {
         context: config.docsPath,
         from: 'changelog.html',
-        to: path.join(config.rootPath, 'docs')
+        to: docsPath
       },
       {
         context: config.docsPath,
         from: 'versions.json',
-        to: path.join(config.rootPath, 'docs')
+        to: docsPath
       }
     ]),
     new HtmlWebpackPlugin({
@@ -77,15 +83,20 @@ export default merge(baseConfig, {
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks: (module) => {
+      minChunks(module) {
         let resource = module.resource;
 
-        return resource && (/\.js$/).test(resource) && resource.indexOf(config.nodePath) === 0;
+        if (resource && (/\.js$/).test(resource)) {
+          return resource.indexOf(config.nodePath) >= 0;
+        }
+
+        return false;
       }
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    })
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
   ]
 });

build/webpack/prod-lib.js

@@ -4,9 +4,12 @@ import webpack from 'webpack';
 import merge from 'webpack-merge';
 import autoprefixer from 'autoprefixer';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeJsPlugin from 'optimize-js-plugin';
 import config from '../config';
 import baseConfig from './base';
 
+const version = process.env.VERSION || require('../../package.json').version;
+
 function getDirectories(src) {
   return fs.readdirSync(src).filter((file) => {
     return fs.statSync(path.join(src, file)).isDirectory();
@@ -43,13 +46,32 @@ export default merge(baseConfig, {
       })
     ]
   },
+  externals: {
+    vue: 'Vue'
+  },
   plugins: [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.IgnorePlugin(/vue/),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
-      }
+      },
+      comments: false
     }),
     new webpack.optimize.OccurenceOrderPlugin(),
+    new OptimizeJsPlugin({
+      sourceMap: false
+    }),
+    new webpack.BannerPlugin(
+`/*!
+ * Vue Material v${version}
+ * Made with love by Marcos Moura
+ * Released under the MIT License.
+ */`
+    , {
+      raw: true,
+      entryOnly: true
+    }),
     new ExtractTextPlugin('[name].css')
   ]
 });

docs/src/App.vue

@@ -321,6 +321,17 @@
       }
     }
   }
+
+  .phone-viewport {
+    width: 360px;
+    height: 540px;
+    margin-right: 16px;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid rgba(#000, .12);
+  }
 </style>
 
 <script>

docs/src/pages/components/List.vue

@@ -951,19 +951,6 @@
   </page-content>
 </template>
 
-<style lang="scss">
-  .phone-viewport {
-    width: 360px;
-    height: 540px;
-    margin-right: 16px;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    background-color: #fff;
-    border: 1px solid rgba(#000, .12);
-  }
-</style>
-
 <style lang="scss" scoped>
   .phone-viewport {
     height: 400px;

package.json

@@ -73,6 +73,7 @@
     "html-webpack-plugin": "^2.24.1",
     "json-loader": "^0.5.4",
     "node-sass": "^4.1.1",
+    "optimize-js-plugin": "^0.0.4",
     "ora": "^0.4.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^4.1.1",