webpack打包體積優化

 

優化：

1：外部引入模塊（cdn）
     如 jquery，zepto，d3, bootstrap這些固定的lib 使用cdn直接引用就能夠，沒有必要打包到build，有效利用302。

2：圖標優化
     無論後臺仍是移動端避免不了icon的使用，使用字體圖標，還需引入字體文件，若是字體丟失 會影響到icon顯示效果，推薦轉換base64 後引用。

 

3：統一模塊

    如：moment咱們可能在多個頁面使用  不必每一個頁面進行import引入，能夠在入口文件（index.js 或main.js）全局配置

 　　例如：

 

　　　 　　　import Vue from 'vue' 　　　　 　　　　　　
　　　　　　Vue.prototype.$moment = moment;

 

　　　 之後在每一個頁面均可以直接使用 this.$moment ,  不在須要每一個頁面import 'moment' 。

　　　　　moment 有各類語言包，總大小200k+，如使用webpack打包 建議過濾掉其餘語言

　　　　new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 

　　　　或 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)

4：分離第三方庫

  entry: { 　　　
　　app: './src/main.js', //設置入口文件 　 　
　　vendors: ['vue', 'vue-router', 'moment']
},

 plugins[ new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'manifest'], // 若是有manifest 每次打包壓縮後的文件不會改變hash minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }),] 

　

　　使用 CommonsChunkPlugin插件配置 每次build後，都會從新設置hash，致使Etag不一樣，每次上線都會更新Etag, 沒法利用瀏覽器緩存。

 下圖優化大小：

 後臺項目：總大小 20M 減小到4.2M   後臺4.2M, 在開啓gzip壓縮下，勉強湊合。

　　

優化後：
 

移動端：2.0M減小到830K,開啓gzip 大概在400-500k左右。