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'
        })