webpack3拆分代碼（壓縮打包體積）

背景：由於目前線上版本的h5加載一直很慢，於是趁着最近有空就打算優化一下，首先打開network分析影響加載速度的文件有哪些。

看原文件大小有接近1.4m，不能忍！！！

注意：

1、博主這裏用的vue-cli2.x版本，webpack爲3.6.0版本。
2、vendor文件一般放的是長時間不怎麼更新的庫，比如vue、vuex、vue-router等等。

開始搞事情。

1、刪除多餘的第三方庫。

檢查自己package.json文件下dependencies裏面有哪些是安裝引用了但是沒用的。因爲裏面可能存在當時做項目測demo引入的庫忘記刪除，挨個挨個篩選，找到以後執行下面的命令將其卸載。

npm un xxxx

這一步執行完後博主的vendor文件體積減少了接近400k。

2、配置webpack將剩下的vendor拆分成體積較小的多個文件。

// webpack.base.conf.js

// entry: {
//   app: './src/main.js'
// },

// webpack.dev.conf.js

entry: {
   app: './src/main.js'
},

// webpack.prod.conf.js

entry: {
    vendor1: ["vue-router", "vuex", "vue"]],
    vendor2: ["js-cookie", "v-viewer", "clipboard"],
    vendor3: ["element-ui"],
    app: './src/main.js'
},

new webpack.optimize.CommonsChunkPlugin({
	  // 這裏要跟entry配置的順序反着來，否則不能成功
      names: ["vendor3", "vendor2", "vendor1"], 
      minChunks: Infinity

	  // 下面是cli默認配置
      // name: 'vendor',
      // minChunks (module) {
      //   // 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
      //   )
      // }
    }),

配置完後重新打包，very nice!!! 結果如下：

體積是小了很多，但是這個element-ui也太大了不，光這一個庫就有600k，我們給它再處理一下。

3、給最大的庫進行按需加載（博主這裏是element，其他的方法類似）。

使用官方提供的按需加載插件babel-plugin-component，安裝

npm install babel-plugin-component -D(等同於--save-dev)

在 .babelrc 裏配置 plugins如下 (如果是vue-cli3.x版本的話，則在babel.config.js文件添加，其他操作一樣)

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    /************* 添加下面的代碼 start  ****************/
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
     /*************** end **************/
  ]
}

在src下新建element文件夾，再在element下建一個index.js文件，用於配置element-ui的按需加載，如下：

// src/element/index.js

import { Carousel, Rate, Dialog, Form, FormItem, Checkbox, CarouselItem, InfiniteScroll, Switch, Collapse, CollapseItem, Timeline, TimelineItem } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'

Vue.use(InfiniteScroll)
Vue.component(Carousel.name, Carousel)
Vue.component(Rate.name, Rate)
Vue.component(Dialog.name, Dialog)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Switch.name, Switch)
Vue.component(CarouselItem.name, CarouselItem)
Vue.component(Collapse.name, Collapse)
Vue.component(CollapseItem.name, CollapseItem)
Vue.component(Timeline.name, Timeline)
Vue.component(TimelineItem.name, TimelineItem)

在main.js引入該文件，如下：

import './element/index'

再修改webpack.prod.conf.js文件配置如下：

// webpack.prod.conf.js

entry: {
    vendor1: ["vue-router", "vuex", "vue"]],
    vendor2: ["js-cookie", "v-viewer", "clipboard"],
    element: './src/element/index.js',
    app: './src/main.js'
},

new webpack.optimize.CommonsChunkPlugin({
	// 這裏要跟entry配置的順序反着來，否則不能成功
    names: ["element", "vendor2", "vendor1"], 
    minChunks: Infinity
}),

再次npm run build走一波，結果如下，可以看到，幹了這麼多的事，還是很有效果的，element體積只有100k了。

4、gzip壓縮：這裏還有一個就是gzip壓縮，如果沒有啓用這個方案的趕緊試一下，據說可以壓縮接近70%的體積，因爲博主這裏一開始就是配置好的，不受這個影響，也就沒寫詳細過程，想知道自己是否已經開啓gzip壓縮，可通過如下方式查看：

有gzip就表示開啓了的，另外也可以在Reponse Headers查看，如下：