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

生產環境

• 平時咱們開發時，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文件的大小，而且能夠打開看看裏面的內容，尋找你的優化點~這是我項目的優化過程，大都只講思路，沒有涉及很具體，可能還有些缺陷和錯誤，歡迎批評指教，一塊兒交流學習。