vue-cli2項(xiàng)目打包上線前的優(yōu)化

一。引入 CDN
// 不會發(fā)生變動(dòng)的js庫可以放入script標(biāo)簽中,從外部引入
// 注意一點(diǎn):格式為 'aaa' : 'bbb', 其中,aaa表示要引入的資源的名字,bbb表示該模塊提供給外部引用的名字,由對應(yīng)的庫自定。例如,vue為Vue,vue-router為VueRouter.

webpack.base.conf.js文件
  externals: {
    'vue':'Vue',
    'html2canvas': 'html2canvas',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'crypto-js': 'CryptoJS',
    'jsencrypt': 'JSEncrypt'
  },

index.html文件
    <script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.staticfile.org/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <script src="https://cdn.staticfile.org/jsencrypt/3.0.0-rc.1/jsencrypt.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>

二。去除 .map文件
 在項(xiàng)目 根目錄 config/index.js 中 build 內(nèi)找到 productionSourceMap: true, 把 true改為****false。從而重新打包以后,系統(tǒng)就不會自動(dòng)生成 map文件了。

image

三。使用Gzip壓縮
1.服務(wù)器那邊得開啟gzip

image.png

2.根目錄config/index.js 中 build 內(nèi)找到 **productionGzip: false, **把 **false****改為****true。

image

3.安裝插件 compression-webpack-plugin  注:安裝的時(shí)候帶上版本號,現(xiàn)在 compression-webpack-plugin 2.0已出,默認(rèn)該命令安裝最新版,最新版本和當(dāng)前的webpack不匹配,要報(bào)錯(cuò)。

cnpm install --save-dev compression-webpack-plugin@1.1.12

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue-cli搭建項(xiàng)目 確保安裝了node與npm 再目標(biāo)文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,367評論 1 22
  • 什么是 webpack 是前端的一個(gè)項(xiàng)目構(gòu)建工具,他是基于 Node.js 開發(fā)出來的一個(gè)前端工具 如何完美實(shí)現(xiàn)上...
    千見閱讀 1,569評論 0 0
  • 在Vue項(xiàng)目中,引入到工程中的所有js、css文件,編譯時(shí)都會被打包進(jìn)vendor.js,瀏覽器在加載該文件之后才...
    從零開始_b1ec閱讀 2,377評論 0 30
  • 路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁面上的home按鈕時(shí),頁面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁面上的about...
    裘馬輕狂大帥閱讀 789評論 0 5
  • 1路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁面上的home按鈕時(shí),頁面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁面上的abou...
    你好陌生人丶閱讀 1,795評論 0 6

友情鏈接更多精彩內(nèi)容