Feat：优化 babel-loader && 新增happypack配置

lfb · Nov 8, 2019 · d7de7d7 · d7de7d7
1 parent 3b0d61c
commit d7de7d7
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@
 - [x] 文件结构可视化：webpack-bundle-analyzer
 - [x] 业务代码和第三方库区分打包：DllPlugin  
 - [x] 删除冗余代码：UglifyJsPlugin 
+- [x] 优化 babel-loader，开启 cacheDirectory
+- [x] 使用 Happypack将 loader 由单进程转为多进程
 - [x] 开启 Gizp 压缩：compression-webpack-plugin 
 - [x] 单元测试
 

diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=http://img.boblog.com/favicon.ico><title>webapp</title><link href=http://img.boblog.com/static/js/about.52ae166b.js rel=prefetch><link href=http://img.boblog.com/static/css/app.d184333e.css rel=preload as=style><link href=http://img.boblog.com/static/js/app.54641066.js rel=preload as=script><link href=http://img.boblog.com/static/js/chunk-vendors.4fc6d7c0.js rel=preload as=script><link href=http://img.boblog.com/static/css/app.d184333e.css rel=stylesheet></head><body><noscript><strong>We're sorry but webapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=./vendor/vendor.dll.js></script><script src=http://img.boblog.com/static/js/chunk-vendors.4fc6d7c0.js></script><script src=http://img.boblog.com/static/js/app.54641066.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=http://img.boblog.com/favicon.ico><title>webapp</title><link href=http://img.boblog.com/static/js/about.1ac4c12e.js rel=prefetch><link href=http://img.boblog.com/static/css/app.d184333e.css rel=preload as=style><link href=http://img.boblog.com/static/js/app.19a1129b.js rel=preload as=script><link href=http://img.boblog.com/static/js/chunk-vendors.4fc6d7c0.js rel=preload as=script><link href=http://img.boblog.com/static/css/app.d184333e.css rel=stylesheet></head><body><noscript><strong>We're sorry but webapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=./vendor/vendor.dll.js></script><script src=http://img.boblog.com/static/js/chunk-vendors.4fc6d7c0.js></script><script src=http://img.boblog.com/static/js/app.19a1129b.js></script></body></html>
diff --git a/dist/report.html b/dist/report.html
diff --git a/dist/static/js/about.52ae166b.js → dist/static/js/about.1ac4c12e.js b/dist/static/js/about.52ae166b.js → dist/static/js/about.1ac4c12e.js
diff --git a/dist/static/js/app.54641066.js → dist/static/js/app.19a1129b.js b/dist/static/js/app.54641066.js → dist/static/js/app.19a1129b.js
diff --git a/dist/static/js/app.19a1129b.js.gz b/dist/static/js/app.19a1129b.js.gz
diff --git a/dist/static/js/app.54641066.js.gz b/dist/static/js/app.54641066.js.gz
diff --git a/package.json b/package.json
@@ -24,16 +24,17 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-unit-jest": "^4.0.0",
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/cli-plugin-unit-jest": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "add-asset-html-webpack-plugin": "^3.1.3",
     "babel-eslint": "^10.0.3",
     "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "^3.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "happypack": "^5.0.1",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "uglifyjs-webpack-plugin": "^2.2.0",

diff --git a/vue.config.js b/vue.config.js
@@ -4,8 +4,15 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const HappyPack = require('happypack')
+const os = require('os')
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
 const isProduction = process.env.NODE_ENV === 'production'
 
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
 module.exports = {
   publicPath: process.env.PUBLIC_PATH,
   assetsDir: 'static',
@@ -72,6 +79,15 @@ module.exports = {
       )
       // 打包后模块大小分析
       config.plugins.push(new BundleAnalyzerPlugin())
+
+      // happyBabel
+      config.plugins.push(new HappyPack({
+        // 这个HappyPack的“名字”就叫做happyBabel，和楼上的查询参数遥相呼应
+        id: 'happyBabel',
+        // 指定进程池
+        threadPool: happyThreadPool,
+        loaders: ['babel-loader?cacheDirectory']
+      }))
     }
   },
   css: {
@@ -82,6 +98,29 @@ module.exports = {
     // css预设器配置项
     loaderOptions: {}
   },
+  // 链式操作  https://github.com/neutrinojs/webpack-chain
+  chainWebpack: config => {
+    config.module
+      .rule('compile')
+      .test(/\.js$/)
+      .include
+      .add(resolve('src'))
+      .add(resolve('tests'))
+      .end()
+      .exclude
+      .add(/node_modules/)
+      .add(/bower_components/)
+      .add(/dist/)
+      .end()
+      .use('babel')
+      .loader('happypack-loader?id=happyBabel')
+      .loader('babel-loader?cacheDirectory=true')
+      .options({
+        presets: [
+          ['@babel/preset-env', { modules: false }]
+        ]
+      })
+  },
   // 打包时不生成.map文件
   productionSourceMap: false
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1885,6 +1885,11 @@ async-limiter@^1.0.0, async-limiter@~1.0.0:
   resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
 
+async@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.0.tgz#2796642723573859565633fc6274444bee2f8ce3"
+  integrity sha1-J5ZkJyNXOFlWVjP8YnRES+4vjOM=
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz?cache=0&sync_timestamp=1563385399810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync%2Fdownload%2Fasync-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -4751,6 +4756,16 @@ handlebars@^4.1.2:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+happypack@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/happypack/-/happypack-5.0.1.tgz#850839426d6205a520bf913e962349fbe523a07c"
+  integrity sha512-AzXVxLzX0mtv0T40Kic72rfcGK4Y2b/cDdtcyw+e+V/13ozl7x0+EZ4hvrL1rJ8MoefR9+FfUJQsK2irH0GWOw==
+  dependencies:
+    async "1.5.0"
+    json-stringify-safe "5.0.1"
+    loader-utils "1.1.0"
+    serialize-error "^2.1.0"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/har-schema/download/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -6140,7 +6155,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npm.taobao.org/json-stable-stringify-without-jsonify/download/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stringify-safe@~5.0.1:
+json-stringify-safe@5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz?cache=0&sync_timestamp=1560524653371&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson-stringify-safe%2Fdownload%2Fjson-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -6323,6 +6338,15 @@ loader-runner@^2.3.1, loader-runner@^2.4.0:
   resolved "https://registry.npm.taobao.org/loader-runner/download/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha1-7UcGa/5TTX6ExMe5mYwqdWB9k1c=
 
+loader-utils@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+  integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
 loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@@ -8730,6 +8754,11 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-error@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
+  integrity sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=
+
 serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   version "1.9.1"
   resolved "https://registry.npm.taobao.org/serialize-javascript/download/serialize-javascript-1.9.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fserialize-javascript%2Fdownload%2Fserialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
@@ -10051,8 +10080,8 @@ webpack-bundle-analyzer@^3.6.0:
 
 webpack-chain@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npm.taobao.org/webpack-chain/download/webpack-chain-6.0.0.tgz#9c36525a1271a54e7bfd1791199b395f400ae4f1"
-  integrity sha1-nDZSWhJxpU57/ReRGZs5X0AK5PE=
+  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.0.0.tgz#9c36525a1271a54e7bfd1791199b395f400ae4f1"
+  integrity sha512-NK62XgJOOSmYs4kaXFIKKeClpuOVHY7m6e4XwxbVX/2HAUboH6xFCTVXMVv8+jB6K8o/UGjlo1Cv3XXOyNAAGw==
   dependencies:
     deepmerge "^1.5.2"
     javascript-stringify "^2.0.0"