vue項目生產環境下的一些配置以及優化

jsummer 發布于2019-08-22 15:44 / 2950人閱讀

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

生產環境

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

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

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

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

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

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

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

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

配置優化

隱藏控制臺信息

在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文件

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

代碼優化

代碼優化其實要試具體項目而定。

路由肯定要按需加載

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

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

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

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

公共的函數和公共的css文件也是同樣的道理

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

Vue.prototype.functionName = functionName

圖片的大小

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

結語

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

云服務器 GPU云服務器 java項目配置環境服務器配置以及價格生產環境測試環境測試環境生產環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93699.html

Vue+Express全棧購物商城

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

Richard_Gao 2019-05-22 18:23 評論0 收藏0
Vue+Express全棧購物商城

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

luzhuqun 2019-08-26 13:50 評論0 收藏0
webpack4.x升級摘要

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

levinit 2019-08-23 18:11 評論0 收藏0
vue項目搭建以及全家桶的使用詳細教程

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

simon_chen 2019-08-30 15:54 評論0 收藏0
vue項目搭建以及全家桶的使用詳細教程

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

curlyCheng 2019-08-02 13:55 評論0 收藏0