vue項目總結（一）

Vue 獨立構建 & 運行時構建

-- KChris 2017.3.13 (=^.^=)

目的：優化項目中文件的體積。

1.config/index.js

npm install --save-dev compression-webpack-plugin
productionGzip: true

//Gzip off by default as many popular static hosts
//such as Surge or Netlify already gzip all static assets for you.

2.查看編譯後各文件體積大小等信息

1）直接用 npm 命令：

npm run build --report

2）用 webpack 命令：

webpack --config build/webpack.dev.conf.js
webpack --config builg/webpack.dev.conf.js \ --profile --json => stats.json

結合：http://alexkuz.github.io/webp... 或者 http://webpack.github.io/anal... 上傳 json 文件生成圖表

Note: 不要小看這個步驟，這對於你優化項目文件的體積很是重要，它會引導你從哪些文件入手進行你的優化。從這裏，我發現 vue.common.js 這個文件佔了我很大的內存空間，因而，我纔會在 Google 上搜索這個文件，而後發現 vue2.x 中，它的編譯分獨立構建和運行構建，再一步步地慢慢找到下面步驟的。

3.Vue 項目自己入手，改獨立編譯爲運行時編譯

1）build/webpack.base.conf.js

alis： {
    'vue$': 'vue/dist/vue.runtime.common.js'
}
// change vue.common.js to vue.runtime.common.js

2) 去掉項目中的 template 選項，改成 render 選項。

new Vue({
    render: function(h) {
        return h('App')
    }
})
// remove template options: template: '<App/>'

ok,在這裏咱們就將 vue 的獨立構建改爲運行時構建了。這時，咱們再 npm run build，會發現，文件體積確實變小了不少，也沒有了以前的 warning 提示。由於在個人項目裏主要是 vue.common.js 這個文件佔據了比較大的空間而致使終端有 warning 提示文件太大，因此，改爲運行時編譯對於我來講，基本上就解決問題了。