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

jsummer 發(fā)布于2019-08-22 15:44 / 2952人閱讀

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

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

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

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

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

但是有個(gè)注意點(diǎn)就是用base64轉(zhuǎn)過(guò)的圖標(biāo)會(huì)比原來(lái)的那個(gè)圖的大小大30%~40%(可以將你圖片轉(zhuǎn)成的base64然后保存成文本對(duì)比圖片的大小)

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

還會(huì)生成app.js, vendor.js, manifest.js

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

還會(huì)生成一個(gè)存放公共樣式的css文件，在首次打開(kāi)的時(shí)候就加載完畢

配置優(yōu)化

隱藏控制臺(tái)信息

在webpack.prod.conf.js文件下補(bǔ)充代碼：

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

隱藏源碼：

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

開(kāi)啟gZip壓縮

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

productionGzip: true

當(dāng)再次npm run build時(shí)會(huì)生成.gz文件：

在控制臺(tái)的network可以看到加載的js文件

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

代碼優(yōu)化

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

路由肯定要按需加載

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

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

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

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

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

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

Vue.prototype.functionName = functionName

圖片的大小

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

結(jié)語(yǔ)

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