成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue項目生產(chǎn)環(huán)境下的一些配置以及優(yōu)化

jsummer / 3043人閱讀

摘要：還會生成一個存放公共樣式的文件，在首次打開的時候就加載完畢配置優(yōu)化隱藏控制臺信息在文件下補充代碼不顯示控制臺打印信息隱藏源碼在下的里改為即可。當再次時會生成文件在控制臺的可以看到加載的文件優(yōu)化效果明顯，單個文件至少能縮小一半以上。

生產(chǎn)環(huán)境

平時我們開發(fā)時，npm run dev的環(huán)境是開發(fā)環(huán)境；而部署到線上時，npm run build的環(huán)境是生產(chǎn)環(huán)境，代碼會被打包，放到新生成的dist文件夾下；

圖標資源等會被轉(zhuǎn)為base64,當圖片小于一定的大小時，圖片就會被轉(zhuǎn)為base64,這個大小可以在webpack配置里設(shè)置，在webpack.base.conf.js下：

//圖片壓縮
new ImageminPlugin({
  disable: process.env.NODE_ENV !== "production", // Disable during development
  pngquant: {
    quality: "95-100"
  }
}),

但是有個注意點就是用base64轉(zhuǎn)過的圖標會比原來的那個圖的大小大30%~40%(可以將你圖片轉(zhuǎn)成的base64然后保存成文本對比圖片的大小)

每個vue文件中的js和css都會被壓縮然后多帶帶打包成一個js， 每次打開一個頁面，就會相應(yīng)的去加載那個js文件；

還會生成app.js, vendor.js, manifest.js

每當我們點擊一個頁面就會去加載一個js文件（第二次點擊讀的就是緩存），這個js文件就是webpack打包的關(guān)于這個頁面的壓縮代碼。

還會生成一個存放公共樣式的css文件，在首次打開的時候就加載完畢

配置優(yōu)化

隱藏控制臺信息

在webpack.prod.conf.js文件下補充代碼：

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    /*不顯示控制臺打印信息*/
    drop_debugger: true,
    drop_console: true,
    pure_funcs: ["console.log"]
  },
  sourceMap: false
})

隱藏源碼：

在config/index.js下的build里:
productionSourceMap: true改為productionSourceMap：false即可。

開啟gZip壓縮

在config/index.js中：
將false改為true即可。

productionGzip: true

當再次npm run build時會生成.gz文件：


在控制臺的network可以看到加載的js文件

優(yōu)化效果明顯，單個js文件至少能縮小一半以上。

代碼優(yōu)化

代碼優(yōu)化其實要試具體項目而定。

路由肯定要按需加載

component: resolve => require(["path/component.name"], resolve)

如果組件在多個地方引用到，那么最好是將組件抽成公共組件，在main.js中注冊全局組件

Vue.component("component-name", componentName)

這樣組件可在全局直接引用，不用每次先import又局部注冊。
這樣做的目的也是為了縮小js文件的體積，當你的組件在三個地方用到而你分別引入了三次，打包的時候你的組件代碼會被壓縮到三個不同的js文件中，也就是被壓縮了三次；如果注冊為全局組件，則代碼只會被壓縮到app.js中(只被壓縮一次)

公共的函數(shù)和公共的css文件也是同樣的道理

可以將你的公共樣式文件在main.js中引入，至于公共函數(shù)的話，可以掛在到vue下，全局可調(diào)用

Vue.prototype.functionName = functionName

圖片的大小

圖片的大小太大直接影響js文件的大小，所以壓縮圖片是很必要的。如果UI沒有幫我們壓我們就自己壓。http://tinypng.com/

結(jié)語

為了縮小項目的體積，幾kb都要爭取能減少就減少的。盡量將能抽取的代碼抽取，可以看控制臺的network里各個js文件的大小，并且可以打開看看里面的內(nèi)容，尋找你的優(yōu)化點~
這是我項目的優(yōu)化過程，大都只講思路，沒有涉及很具體，可能還有些缺陷和錯誤，歡迎批評指教，一起交流學(xué)習(xí)。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93699.html

相關(guān)文章

  • Vue+Express全棧購物商城

    摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認證機制，來實現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看 這個分支版本是一兩年前...

    Richard_Gao 評論0 收藏0

  • Vue+Express全棧購物商城

    摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認證機制，來實現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。 一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看這個分支版本是一兩...

    luzhuqun 評論0 收藏0

  • webpack4.x升級摘要

    摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...

    levinit 評論0 收藏0

  • vue項目搭建以及全家桶的使用詳細教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過官方文檔的學(xué)習(xí)，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構(gòu)建的過程對 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過vue官方文檔的學(xué)習(xí)，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發(fā)現(xiàn)不知道改怎...

    simon_chen 評論0 收藏0

  • vue項目搭建以及全家桶的使用詳細教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過官方文檔的學(xué)習(xí)，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構(gòu)建的過程對 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過vue官方文檔的學(xué)習(xí)，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發(fā)現(xiàn)不知道改怎...

    curlyCheng 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<