亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

jackzou / 2509人閱讀

摘要：獨(dú)立構(gòu)建運(yùn)行時(shí)構(gòu)建目的優(yōu)化項(xiàng)目中文件的體積。項(xiàng)目本身入手，改獨(dú)立編譯為運(yùn)行時(shí)編譯去掉項(xiàng)目中的選項(xiàng)，改為選項(xiàng)。因?yàn)樵谖业捻?xiàng)目里主要是這個(gè)文件占據(jù)了比較大的空間而導(dǎo)致終端有提示文件太大，所以，改成運(yùn)行時(shí)編譯對(duì)于我來(lái)說，基本上就解決問題了。

Vue 獨(dú)立構(gòu)建 & 運(yùn)行時(shí)構(gòu)建

-- KChris 2017.3.13 (=^.^=)

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

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

3.Vue 項(xiàng)目本身入手，改獨(dú)立編譯為運(yùn)行時(shí)編譯

1）build/webpack.base.conf.js

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

2) 去掉項(xiàng)目中的 template 選項(xiàng)，改為 render 選項(xiàng)。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86948.html

相關(guān)文章

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

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

    spacewander 評(píng)論0 收藏0

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

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

    wind5o 評(píng)論0 收藏0

  • 基于vue項(xiàng)目的知識(shí)總結(jié)

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

    tianlai 評(píng)論0 收藏0

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

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

    CntChen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jackzou

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<