成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue項目總結(jié)（一）

jackzou / 2440人閱讀

摘要：獨立構(gòu)建運行時構(gòu)建目的優(yōu)化項目中文件的體積。項目本身入手，改獨立編譯為運行時編譯去掉項目中的選項，改為選項。因為在我的項目里主要是這個文件占據(jù)了比較大的空間而導致終端有提示文件太大，所以，改成運行時編譯對于我來說，基本上就解決問題了。

Vue 獨立構(gòu)建 & 運行時構(gòu)建

-- KChris 2017.3.13 (=^.^=)

目的：優(yōu)化項目中文件的體積。

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

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

Note: 不要小看這個步驟，這對于你優(yōu)化項目文件的體積非常重要，它會引導你從哪些文件入手進行你的優(yōu)化。從這里，我發(fā)現(xiàn) vue.common.js 這個文件占了我很大的內(nèi)存空間，于是，我才會在 Google 上搜索這個文件，然后發(fā)現(xiàn) vue2.x 中，它的編譯分獨立構(gòu)建和運行構(gòu)建，再一步步地慢慢找到下面步驟的。

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: ""

ok,在這里我們就將 vue 的獨立構(gòu)建改成運行時構(gòu)建了。這時，我們再 npm run build，會發(fā)現(xiàn)，文件體積確實變小了很多，也沒有了之前的 warning 提示。因為在我的項目里主要是 vue.common.js 這個文件占據(jù)了比較大的空間而導致終端有 warning 提示文件太大，所以，改成運行時編譯對于我來說，基本上就解決問題了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86948.html

相關(guān)文章

  • vue 項目總結(jié)一文件夾結(jié)構(gòu)配置

    摘要：文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習慣進行，不必雷同。對文件夾配置的總結(jié)先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結(jié)，有需要的可以去看看。 之前一段時間都在使用 vue 開發(fā)后臺管理系統(tǒng)，在摸索的過程中對 vue 本身和模塊化、規(guī)范化開發(fā)有了更深的認知，現(xiàn)在記錄下來，希望對其他需要開發(fā)項目的人有幫助。 項目配置 首先，在確定好使用的框架和組件庫后，先...

    spacewander 評論0 收藏0

  • vue 項目總結(jié)一文件夾結(jié)構(gòu)配置

    摘要：文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習慣進行，不必雷同。對文件夾配置的總結(jié)先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結(jié)，有需要的可以去看看。 之前一段時間都在使用 vue 開發(fā)后臺管理系統(tǒng)，在摸索的過程中對 vue 本身和模塊化、規(guī)范化開發(fā)有了更深的認知，現(xiàn)在記錄下來，希望對其他需要開發(fā)項目的人有幫助。 項目配置 首先，在確定好使用的框架和組件庫后，先...

    wind5o 評論0 收藏0

  • 基于vue項目的知識總結(jié)

    摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結(jié)，剛好趁著有空就整理一下。結(jié)語有新的知識點會更新到知識體系中，總結(jié)和心得體會會單獨寫文章詳述，努力填坑 前言 用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結(jié)，剛好趁著...

    tianlai 評論0 收藏0

  • 【Vue項目總結(jié)】項目nginx部署

    摘要：項目開發(fā)完成，接下來是上線，關(guān)于項目的部署，我司前端是部署在服務(wù)器上，關(guān)于的相關(guān)文檔，請自行查閱本文只記錄部署時碰到的一些問題。其他總結(jié)文章常規(guī)打包優(yōu)化方案組件通信處理方案后臺管理項目總結(jié) 項目開發(fā)完成，接下來是上線，關(guān)于vue項目的部署，我司前端是部署在nginx服務(wù)器上，關(guān)于nginx的相關(guān)文檔，請自行查閱；本文只記錄部署時碰到的一些問題。 打包 vue項目打包后，是生成一系列的靜...

    CntChen 評論0 收藏0

發(fā)表評論

0條評論

jackzou

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<