adjust build setup for better production minification

Author: yyx990803

build/banner.js

@@ -0,0 +1,8 @@
+var version =
+  process.env.VUE_VERSION ||
+  require('../package.json').version
+
+module.exports =
+  'Vue.js v' + version + '\n' +
+  '(c) ' + new Date().getFullYear() + ' Evan You\n' +
+  'Released under the MIT License.'

build/grunt-tasks/build.js

@@ -1,5 +1,5 @@
 /**
- * Build, update component.json, uglify, and report size.
+ * Build and report size.
  */
 
 module.exports = function (grunt) {
@@ -9,66 +9,34 @@ module.exports = function (grunt) {
     var fs = require('fs')
     var zlib = require('zlib')
     var webpack = require('webpack')
-    var uglifyjs = require('uglify-js')
+    var devConfig = require('../webpack.build.dev.config')
+    var prodConfig = require('../webpack.build.prod.config')
 
-    var banner =
-        '/**\n' +
-        ' * Vue.js v' + grunt.config.get('version') + '\n' +
-        ' * (c) ' + new Date().getFullYear() + ' Evan You\n' +
-        ' * Released under the MIT License.\n' +
-        ' */\n'
-
-    // build
-    webpack({
-      entry: './src/vue',
-      output: {
-        path: './dist',
-        filename: 'vue.js',
-        library: 'Vue',
-        libraryTarget: 'umd'
-      },
-      plugins: [
-        new webpack.BannerPlugin(banner, { raw: true })
-      ]
-    }, function (err, stats) {
+    webpack(devConfig, function (err, stats) {
       if (err) return done(err)
-      minify()
+      report('dist/vue.js')
+      webpack(prodConfig, function (err, stats) {
+        if (err) return done(err)
+        report('dist/vue.min.js')
+        zip()
+      })
     })
 
-    function minify () {
-      var js = fs.readFileSync('dist/vue.js', 'utf-8')
-      report('dist/vue.js', js)
-      // uglify
-      var result = uglifyjs.minify(js, {
-        fromString: true,
-        output: {
-          comments: /License/
-        },
-        compress: {
-          pure_funcs: [
-            'require',
-            '_.log',
-            '_.warn',
-            '_.assertAsset',
-            'enableDebug'
-          ]
-        }
-      })
-      // var min = grunt.config.get('banner') + result.code
-      write('dist/vue.min.js', result.code)
-      // report gzip size
-      zlib.gzip(result.code, function (err, buf) {
-        write('dist/vue.min.js.gz', buf)
-        done(err)
+    function zip () {
+      fs.readFile('dist/vue.min.js', function (err, buf) {
+        if (err) return done(err)
+        zlib.gzip(buf, function (err, buf) {
+          if (err) return done(err)
+          report('dist/vue.min.js.gz', buf)
+          done()
+        })
       })
     }
 
-    function write (path, file) {
-      fs.writeFileSync(path, file)
-      report(path, file)
-    }
-
     function report (path, file) {
+      if (!file) {
+        file = fs.readFileSync(path)
+      }
       console.log(
         blue(path + ': ') +
         (file.length / 1024).toFixed(2) + 'kb'

build/grunt-tasks/release.js

@@ -9,7 +9,7 @@ module.exports = function (grunt) {
    */
 
   grunt.registerTask('version', function (version) {
-    var manifests = ['package', 'bower', 'component']
+    var manifests = ['package', 'component']
     manifests.forEach(function (file) {
       file = file + '.json'
       var json = grunt.file.read(file)
@@ -62,7 +62,8 @@ module.exports = function (grunt) {
     }).question('Releasing version ' + next + '. Continue? (Y/n)', function (answer) {
       if (!answer || answer.toLowerCase() === 'y') {
         console.log(blue('Releasing: ' + next))
-        grunt.config.set('version', next)
+        // set version in env
+        process.env.VUE_VERSION = next
         grunt.task.run([
           'eslint',
           'cover',

build/saucelabs-config.js renamed to build/saucelabs.config.js

@@ -0,0 +1,20 @@
+var webpack = require('webpack')
+var banner = require('./banner')
+
+module.exports = {
+  entry: './src/vue',
+  output: {
+    path: './dist',
+    filename: 'vue.js',
+    library: 'Vue',
+    libraryTarget: 'umd'
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"'
+      }
+    })
+  ]
+}

build/webpack.build.dev.config.js

@@ -0,0 +1,25 @@
+var webpack = require('webpack')
+var banner = require('./banner')
+
+module.exports = {
+  entry: './src/vue',
+  output: {
+    path: './dist',
+    filename: 'vue.min.js',
+    library: 'Vue',
+    libraryTarget: 'umd'
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+}

build/webpack.build.prod.config.js

@@ -1,4 +1,4 @@
-var sauceConfig = require('./build/saucelabs-config')
+var sauceConfig = require('./build/saucelabs.config.js')
 
 module.exports = function (grunt) {
 

build/webpack-dev-config.js renamed to build/webpack.dev.config.js

@@ -18,7 +18,15 @@
   "homepage": "http://vuejs.org",
   "scripts": {
     "test": "grunt ci",
-    "dev": "webpack --watch --config build/webpack-dev-config.js & webpack --watch --config build/webpack-test-config.js"
+    "dev": "webpack --watch --config build/webpack.dev.config.js & webpack --watch --config build/webpack.test.config.js"
+  },
+  "dependencies": {
+    "envify": "^3.4.0"
+  },
+  "browserify": {
+    "transform": [
+      "envify"
+    ]
   },
   "devDependencies": {
     "casperjs": "^1.1.0-beta3",

build/webpack-test-config.js renamed to build/webpack.test.config.js

@@ -13,7 +13,9 @@ var compiler = require('../compiler')
 
 exports.$mount = function (el) {
   if (this._isCompiled) {
-    _.warn('$mount() should be called only once.')
+    process.env.NODE_ENV !== 'production' && _.warn(
+      '$mount() should be called only once.'
+    )
     return
   }
   el = _.query(el)

gruntfile.js

@@ -71,7 +71,7 @@ exports.push = function (job) {
       has[id]++
       // detect possible infinite update loops
       if (has[id] > config._maxUpdateCount) {
-        _.warn(
+        process.env.NODE_ENV !== 'production' && _.warn(
           'You may have an infinite update loop for the ' +
           'watcher with expression: "' + job.expression + '".'
         )

package.json

@@ -30,10 +30,11 @@ module.exports = function compileProps (el, propOptions) {
     // so we need to camelize the path here
     path = _.camelize(name.replace(dataAttrRE, ''))
     if (!identRE.test(path)) {
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'Invalid prop key: "' + name + '". Prop keys ' +
         'must be valid identifiers.'
       )
+      continue
     }
     value = el.getAttribute(_.hyphenate(name))
     // create a prop descriptor
@@ -68,15 +69,17 @@ module.exports = function compileProps (el, propOptions) {
           if (settablePathRE.test(prop.parentPath)) {
             prop.mode = propBindingModes.TWO_WAY
           } else {
-            _.warn(
+            process.env.NODE_ENV !== 'production' && _.warn(
               'Cannot bind two-way prop with non-settable ' +
               'parent path: ' + prop.parentPath
             )
           }
         }
       }
     } else if (options && options.required) {
-      _.warn('Missing required prop: ' + name)
+      process.env.NODE_ENV !== 'production' && _.warn(
+        'Missing required prop: ' + name
+      )
     }
     props.push(prop)
   }
@@ -120,7 +123,7 @@ function makePropsLinkFn (props) {
             vm._bindDir('prop', el, prop, propDef)
           }
         } else {
-          _.warn(
+          process.env.NODE_ENV !== 'production' && _.warn(
             'Cannot bind dynamic prop on a root instance' +
             ' with no parent: ' + prop.name + '="' +
             prop.raw + '"'

src/api/lifecycle.js

@@ -522,7 +522,9 @@ function compileDirectives (elOrAttrs, options) {
     if (name.indexOf(config.prefix) === 0) {
       dirName = name.slice(config.prefix.length)
       dirDef = resolveAsset(options, 'directives', dirName)
-      _.assertAsset(dirDef, 'directive', dirName)
+      if (process.env.NODE_ENV !== 'production') {
+        _.assertAsset(dirDef, 'directive', dirName)
+      }
       if (dirDef) {
         dirs.push({
           name: dirName,

src/batcher.js

@@ -59,15 +59,13 @@ exports.transclude = function (el, options) {
 function transcludeTemplate (el, options) {
   var template = options.template
   var frag = templateParser.parse(template, true)
-  if (!frag) {
-    _.warn('Invalid template option: ' + template)
-  } else {
+  if (frag) {
     var replacer = frag.firstChild
     var tag = replacer.tagName && replacer.tagName.toLowerCase()
     if (options.replace) {
       /* istanbul ignore if */
       if (el === document.body) {
-        _.warn(
+        process.env.NODE_ENV !== 'production' && _.warn(
           'You are mounting an instance with a template to ' +
           '<body>. This will replace <body> entirely. You ' +
           'should probably use `replace: false` here.'
@@ -96,6 +94,10 @@ function transcludeTemplate (el, options) {
       el.appendChild(frag)
       return el
     }
+  } else {
+    process.env.NODE_ENV !== 'production' && _.warn(
+      'Invalid template option: ' + template
+    )
   }
 }
 

src/compiler/compile-props.js

@@ -50,7 +50,7 @@ module.exports = {
         this.transMode = this._checkParam('transition-mode')
       }
     } else {
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'Do not create a component that only contains ' +
         'a single other component - they will be mounted to ' +
         'the same element and cause conflict. Wrap it with ' +

src/compiler/compile.js

@@ -25,11 +25,11 @@ module.exports = {
         true
       )
     } else {
-      this.invalid = true
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'v-if="' + this.expression + '" cannot be ' +
         'used on an instance root element.'
       )
+      this.invalid = true
     }
   },
 

src/compiler/transclude.js

@@ -29,7 +29,7 @@ module.exports = {
     // friendly warning...
     this.checkFilters()
     if (this.hasRead && !this.hasWrite) {
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'It seems you are using a read-only filter with ' +
         'v-model. You might want to use a two-way filter ' +
         'to ensure correct behavior.'
@@ -45,7 +45,9 @@ module.exports = {
     } else if (tag === 'TEXTAREA') {
       handler = handlers.text
     } else {
-      _.warn('v-model does not support element type: ' + tag)
+      process.env.NODE_ENV !== 'production' && _.warn(
+        'v-model does not support element type: ' + tag
+      )
       return
     }
     handler.bind.call(this)

src/directives/component.js

@@ -82,7 +82,9 @@ function initOptions (expression) {
       buildOptions(self.el, value)
       self.forceUpdate()
     } else {
-      _.warn('Invalid options value for v-model: ' + value)
+      process.env.NODE_ENV !== 'production' && _.warn(
+        'Invalid options value for v-model: ' + value
+      )
     }
   }
   this.optionWatcher = new Watcher(

src/directives/if.js

@@ -21,7 +21,7 @@ module.exports = {
 
   update: function (handler) {
     if (typeof handler !== 'function') {
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'Directive "v-on:' + this.expression + '" ' +
         'expects a function value.'
       )

src/directives/model/index.js

@@ -7,7 +7,7 @@ module.exports = {
   bind: function () {
     var vm = this.el.__vue__
     if (!vm) {
-      _.warn(
+      process.env.NODE_ENV !== 'production' && _.warn(
         'v-ref should only be used on a component root element.'
       )
       return