Vue-cli

vue-cli 中一些优化措施

Single File Components(SFCs)

,在一个 以.vue 后缀结尾的文件，里面能够写js,css,html,使用vue-loader ，能够识别不一样的语言块，script输出到babel-loader,模块输出到vue的vue-template-loader,该loader可以将模板转换成JavaScript的render函数。

Vue.runtime.js

被称为vue运行时构建版本，包含了Vue全部的特色，体积比全功能版本小20kb。默认状况下使用的是运行时构建版本，因此当你使用 import vue from 'vue' 来引用Vue的时候，你获得的是运行时构建版本，不过你能经过 alias 配置项来改变。

production环境中去掉warn 和error信息

`if(process.env.NODE_ENV !== 'production') {
   warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}`

从这里能够看出来，若是process.env.NODE_ENV 设置成production，那么提示信息在编译过程当中就会被忽略，

DefinePlugin

经过它来设置process.env.NODE_ENV的值，

使用UGlifyJsPlugin

减少代码体积，去掉没必要要的代码块。

if (process.env.NODE_ENV === 'production') {
             module.exports.plugins = (module.exports.plugins || []).concat([
               new webpack.DefinePlugin({
                 "process.env": {
                   NODE_ENV: '"production"'
                 }}),
               new webpack.optimize.UglifyJsPlugin()
             ])
        }

Vendor file

Common Chunks插件能把你的Vendor代码（例如Vue.js这些不会常常改动的依赖包）和应用代码（每次开发过程当中都会改动的代码）分离开。
你能配置插件检查一个依赖是否来自于node_modules，若是是，那就打包到vendor.js 文件。

hash

,也被称为指纹 当文件变更后，丢弃缓存，默认状况下，只有当一个缓存文件过时，或者用户手动清除缓存，浏览器才会从新从服务器请求文件，若是服务器提示文件已经改动，那文件才会从新被下载（若是返回304则不会）。为了不没必要要的请求，咱们能够在每次文件内容改动时，改变文件的名字，从而强制浏览器从新下载，经过在文件名称后面添加一个"指纹":hash，咱们能够很是容易达到这个目的。

output: {
             filename: '[name].[chunkhash].js'
            },

HTML Webpack Plugin

这个插件能在构建过程当中自动在你的HTML文件里插入对构建文件的引用。
先来把构建文件中的引用去掉

new HtmlWebpackPlugin({
         filename: 'index.html'
         template: 'index.html',
         inject: true,
         chunksSortMode: 'dependency'
        })