vue-cli 腳手架是如何打包優化

vue 腳手架如何打包優化

之前一篇博客講了 vue-cli 是如何構建項目的，這次講講 vue-cli 打包做了什麼優化。

vue-cli 項目構建博客地址

vue-cli 優化

這裏有壓縮代碼，代碼分割，還有利用緩存三個方面

（1）壓縮代碼

使用壓縮插件壓縮代碼，減少文件大小，是很常用的優化方式

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false	
  },
  sourceMap: true
})

（2）代碼分割

頁面功能複雜導致加載體積過大時，就需要進行代碼分割，一是分離業務代碼和第三方庫，二是按需加載

分離業務代碼和第三方庫：使變動較少的第三方庫分離出來，利於緩存，不用經常更新

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
})

具體如上圖，在打包過程中，使用 CommonsChunkPlugin 插件從代碼中分離出 vendor.js 這個公共代碼。這裏看 return 內容，插件會遍歷第三方包 node_modules 裏面被用到的以 js 結尾的文件然後進行打包。

按需加載：利用 import() 語法，實現異步加載

這裏明確一下， webpack 打包會把所有文件打包成 js 文件以 module.export 方式輸出，在文件內 import() 引用其他文件會返回 Promise，並把文件內容單獨合成在一個新文件按需引入，而不是併入當前文件，從而實現了代碼分割。

在路由中，頁面按需加載

const Index = () => import('VIEWS/index')
export default [
    {
    	name: 'index',
    	path: '/index',
    	component: Index
    }
]

頁面中，組件按需加載

tempelete:
<swiper>...</swiper>

script:
const Swiper = () => import('COMPONENTS/Swiper'）

（3）利用緩存

這個第三點劃分其實是有問題的，但是主要目的是要講一講如何利用緩存這一點，看下面這篇關於關於前端部署資源緩存的優化的博客。

前端部署博客地址

看了上面的博客，應該明白爲什麼要在文件後面加尾綴了。所以這裏

/* webpack.base.conf.js 文件 */
// url-loader 解析圖片資源
//會把圖片轉化爲Base64形式，隨html一起加載減少http請求
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

/* webpack.prod.conf.js 文件	*/
//使用插件從 js 代碼中分離出 css：
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
})

//輸出js文件：
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

尾綴	狀態變動	常應用於
hash	文件變動，立即改變	圖片等資源
chunkhash	修改到當前模塊或者當前引用的模塊才改變	常用於 js
contenthash	當前模塊的內容變了，值才改變	常用於 css