擁抱webpack4，有效縮減構建時間57%+

時間 2019-11-06

標籤擁抱 webpack4 webpack 有效縮減構建時間 57% 简体版

原文原文鏈接

背景

最近有感受到，隨着系統模塊數量的增長，wepack編譯打包的速度愈來愈慢，因而我想給項目作一下優化升級，也藉此機會系統地學習一下webpack4。javascript

升級過程

當前版本

"dependencies": {
    "@fullcalendar/core": "^4.2.0",
    "@fullcalendar/daygrid": "^4.2.0",
    "@fullcalendar/interaction": "^4.2.0",
    "@fullcalendar/vue": "^4.2.2",
    "axios": "0.18.1",
    "babel-polyfill": "6.26.0",
    "echarts": "4.0.4",
    "element-ui": "2.10.0",
    "jquery": "3.3.1",
    "js-cookie": "2.2.0",
    "js-md5": "0.7.3",
    "lodash": "4.17.5",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "qs": "6.5.1",
    "vue": "2.6.10",
    "vue-router": "3.0.3",
    "vuex": "3.1.1"
},
"devDependencies": {
    "autoprefixer": "7.2.3",
    "babel-core": "6.26.0",
    "babel-eslint": "8.0.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.7.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "2.3.0",
    "copy-webpack-plugin": "4.2.3",
    "css-loader": "0.28.7",
    "eslint": "4.13.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-html": "4.0.1",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
    "node-notifier": "5.1.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.3.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.9",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "semver": "5.4.1",
    "shelljs": "0.7.8",
    "svg-sprite-loader": "4.1.6",
    "uglifyjs-webpack-plugin": "1.1.3",
    "url-loader": "0.6.2",
    "vue-loader": "15.7.0",
    "vue-style-loader": "4.1.2",
    "vue-template-compiler": "2.6.10",
    "webpack": "3.10.0",
    "webpack-bundle-analyzer": "2.9.1",
    "webpack-dev-server": "2.9.7",
    "webpack-merge": "4.1.1"
}

目標版本

"dependencies": {
    "@fullcalendar/core": "^4.2.0",
    "@fullcalendar/daygrid": "^4.2.0",
    "@fullcalendar/interaction": "^4.2.0",
    "@fullcalendar/vue": "^4.2.2",
    "axios": "0.18.1",
    "babel-polyfill": "6.26.0",
    "echarts": "4.0.4",
    "element-ui": "2.10.0",
    "jquery": "3.3.1",
    "js-cookie": "2.2.0",
    "js-md5": "0.7.3",
    "lodash": "4.17.5",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "qs": "6.5.1",
    "vue": "2.6.10",
    "vue-router": "3.0.3",
    "vuex": "3.1.1"
},
"devDependencies": {
    "autoprefixer": "9.6.1",
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.7.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "2.4.2",
    "copy-webpack-plugin": "5.0.4",
    "css-loader": "3.2.0",
    "eslint": "6.3.0",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-loader": "3.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "eventsource-polyfill": "0.9.6",
    "file-loader": "4.2.0",
    "friendly-errors-webpack-plugin": "1.7.0",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-notifier": "5.1.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.3.0",
    "portfinder": "1.0.13",
    "postcss-import": "12.0.1",
    "postcss-loader": "3.0.0",
    "rimraf": "2.6.2",
    "sass-loader": "8.0.0",
    "semver": "5.4.1",
    "shelljs": "0.7.8",
    "svg-sprite-loader": "4.1.6",
    "uglifyjs-webpack-plugin": "2.2.0",
    "url-loader": "2.1.0",
    "vue-loader": "15.7.1",
    "vue-style-loader": "4.1.2",
    "vue-template-compiler": "2.6.10",
    "webpack": "4.39.3",
    "webpack-bundle-analyzer": "3.4.1",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "3.8.0",
    "webpack-merge": "4.2.2"
}

第一步

升級webpack到4.39.3版本，npm run dev遇到了報錯......css

npm run dev報錯

webpack-dev-server版本太低

Error: Cannot find module 'webpack/bin/config-yargs'

應該是webpack與webpack-dev-server版本不符，因而升級webpack-dev-server到3.8.0版本。html

webpack-cli缺失

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'

webpack4將webpack-cli單獨分離出來了，所以提示咱們安裝webpack-cli，那就直接安裝吧。vue

html-webpack-plugin版本問題

10% building 2/2 modules 0 active(node:8596) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:8596) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
53% building 363/366 modules 3 active D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\core-js\modules\_array-reduce.jsD:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\html-webpack-plugin\lib\compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

考慮是html-webpack-plugin版本問題，升級至3.2.0java

extract-text-webpack-plugin?

10% building 2/2 modules 0 active(node:19732) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

查到是由於extract-text-webpack-plugin再也不支持webpack4.3，須要改用mini-css-extract-plugin。node

ps: extract-text-webpack-plugin是用來抽取依賴的.css文件的，防止樣式所有打包在js bundle裏太大。改用了mini-css-extract-plugin後，該報錯並未消除，考慮要用compiler鉤子重寫一些東西，先在這埋個坑，後面弄明白了再來填坑。jquery

eslint-loader升版本

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\eslint-loader\index.js:148:18)

升級eslint-loaderwebpack

file-loader升版本

Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError: Cannot read property 'context' of undefined
    at Object.loader (D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\file-loader\dist\index.js:34:49)

升級file-loaderios

npm run build報錯

改用splitChunks

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

使用webpack4的optimization.splitChunks替代CommonsChunkPluginweb

vue-loader升版本

ERROR in ./src/App.vue?vue&type=style&index=0&id=7c362b6c&lang=scss&scoped=tr (./node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-0!./node_mods/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&id=62b6c&lang=scss&scoped=true&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.:
ModuleParseError: Module parse failed: Unexpected character '#' (14:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

考慮是vue-loader版本問題，先升級vue-loader@15.7.1

babel-loader降版本

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

把babel-loader@8下降了版本，調整爲babel-loader@7

ps: 想了一下，以爲可能其餘的loader版本也會太低，因而將其餘的loader都進行了升級，具體見package.json。

優化打包速度

happypack

一個號稱用多進程策略提高webpack打包速度的插件，真的挺管用的。

happypack容許您並行轉換多個文件，從而加快了webpack的構建速度。

安裝：

npm install --save-dev happypack

簡單配置以下：

const HappyPack = require('happypack')

// webpack配置，只列出關於happypack的配置
rules: [
  // ...其餘rule
  {
    test: /\.js$/,
    // 註釋掉原來的babel-loader，改用happypack/loader
    // loader: "babel-loader",
    use: ['happypack/loader'],
    include: [
      resolve("src")
    ]
  }
],
plugins: [
  // ...其餘plugin
  // 安裝說明簡單配置了一下
  new HappyPack({
    // 將咱們剛纔註釋的loader放在這，告訴happypack
    loaders: ['babel-loader'],
    // 開啓4個子進程，聽說是最優解
    threads: 4
  })
]

總結

通過大量npm包版本的調整，以及webpack配置的修改（主要是optimization的調整；把extract-text-webpack-plugin換成了mini-css-extract-plugin；加入了happypack），報錯基本上消除了，經測試，dev和prod環境都沒有功能上的問題，熱加載，編譯，打包速度確實獲得了顯著提高。

熱加載
速度獲得了顯著提高，以前改一行代碼，熱加載編譯的時間差很少要花1min，讓人難受；優化後，基本上控制在<=5s

webpack升級前打包：

Hash: 35f207120dd3736758dd
Version: webpack 3.10.0
Time: 95987ms

大概須要96s的打包時間。

webpack升級後打包：
```
Hash: fb73468076752cad58f6
Version: webpack 4.39.3
Time: 61597ms
```
打包時間下降到61.6s，節約了34.4s，打包效率提高了35.8%以上。

使用happypack後：

Happy[1]: Version: 5.0.1. Threads: 4
Happy[1]: All set; signaling webpack to proceed.
Hash: a635e8b39b7064adf41c
Version: webpack 4.39.3
Time: 41047ms

打包時間下降到41s，再次節約了20.6s！總共節約了55s，與升級前相比，打包效率提高了57%以上。

固然可優化的空間還很大，webpack4還有不少東西值得咱們去折騰，優化之路還在繼續！

首發連接

掃一掃下方小程序二維碼或搜索Tusi博客，即刻閱讀最新文章！