元件庫webpack構建速度優化經驗總結

steins發表於2018-02-25

元件庫的webpack構建速度優化

背景

在公司的主要工作是元件庫（基於vue的ui元件庫，類似element-ui）的開發，也已經有兩個多月，期間一直覺得專案的開發構建太慢，每次開發開啟開發環境需要 40s 左右，簡直不能忍。前前後後嘗試了各種優化手段，但是都不理想。終於在今天，找到了問題所在，構建速度提升了 50% 以上，現在只需要 17s 左右，整個心情都好了。現在記錄一下所用到的各種優化手段，因為是開發環境，所以只考慮構建速度。

各種配置項的優化

主要是對一些loader新增 include exclude之類的小優化，其實這一點並沒有帶來多少效能的提升，只是一些安慰作用吧。

引入happypack

之前有看到相關文章介紹 happypack 採用多執行緒處理，能大大提升專案的構建速度。嗯，我覺得這個靠譜。看了下github上的文件，趕緊試試水。

修改webpack一些loader配置，使用happypack

// config.dev.js
{
  // ...
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        css: 'style-loader!css-loader!sass-loader',
        // vue檔案中基本不存在css程式碼，所以只把js交給happypack處理
        js: 'happypack/loader?id=babel'
      }
    }, {
      test: /\.js$/,
      use: 'happypack/loader?id=babel',
      exclude: /node_modules/,
      // components目錄是元件，examples目錄主要是markdown文件，test目錄是單元測試
      include: [utils.resolve('./components'), utils.resolve('./examples'), utils.resolve('./test')]
    }, {
      test: /\.scss$/,
      use: 'happypack/loader?id=scss'
    }]
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      threads: 4,
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'scss',
      threads: 4,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            config: {
              path: utils.resolve('./postcss.config.js')
            }
          }
        },
        'sass-loader'
      ]
    })
  ]
  // ...
}
複製程式碼

這裡主要將元件庫中各種需要處理的檔案都採用happypack處理，除了上面的 js scss vue 之外，也把 md （vue-markdown-loader）等進行處理，配置都差不多，就不列出來了。

ok，配置完畢，趕緊跑起來試試水。結果就是報錯了... oh no! 看了下官方文件說明，不支援 vue-markdown-loader。好吧，把 md 檔案的處理改回去，再跑。嗯這次跑起來了，但是時間也就少了 4s-5s 左右，emmmmm，並沒想象中多。

將執行的命令加上--progress能發現，主要耗時的就是處理 md 檔案，很明顯一遇到 md 檔案進度條的跳動就慢下來了。

知道了，優化的主要目標應該是md檔案的處理。

找到了 build/util.js 裡面的一些處理，部分程式碼如下

function render(tokens, idx) {
  // tokens是markdown-it parse後的結果
  var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
  if (tokens[idx].nesting === 1) {
    let index = idx + 1;
    var html = '';
    var style = '';
    var script = '';
    while (tokens[index].nesting === 0) {
      const content = tokens[index].content;
      const tag = tokens[index].info;
      if (tag === 'html') {
        html = convert(striptags.strip(content, ['script', 'style'])).replace(
          /(<[^>]*)=""(?=.*>)/g,
          '$1'
        );
        script = striptags.fetch(content, 'script');
        style = striptags.fetch(content, 'style');
      } else if (tag === 'js' && !script) {
        script = striptags.fetch(content, 'script');
      } else if (
        ['css', 'style', 'scss'].indexOf(tag) !== -1 &&
        !style
      ) {
        style = striptags.fetch(content, 'style');
      }
      index++;
    }
    var description = m && m.length > 1 ? m[1] : '';
    var jsfiddle = { html: html, script: script, style: style };
    var descriptionHTML = description ? md.render(description) : '';

    jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
    return `
      <demo-block class="demo-box" :jsfiddle="${jsfiddle}">
        <div class="source" slot="source">${html}</div>
        ${descriptionHTML}
        <div class="hljs highlight" slot="highlight">
    `;
  }
  return '</div></demo-block>\n';
}
複製程式碼

主要是將 tip 放到指定的 container 裡。還有提取 tokens 裡一些標記為html js css程式碼組成一個物件jsfiddle，傳給一個 vue元件，用於提供jsbin的線上除錯功能。利用markdown-it的 render方法，將其他採用markdown語法寫的文件render成html程式碼放到指定div裡面，將 html 程式碼（其實就是文件中的示例程式碼）作為slot分發給上面提到的 vue元件。

這裡實在是沒找到優化的手段。

引入dll

另外一個嘗試的手段是，採用webpack的 DllPlugin 和 DllReferencePlugin 引入dll，讓一些基本不會改動的程式碼先打包成靜態資源，讓 webpack 少處理一些東西

打包dll的配置

// config.dll.js
module.exports = merge(base, {
  // ...
  entry: {
    vendor: ['vue', 'vue-router', 'vue-i18n', 'clipboard']
  },
  output: {
    path: path.resolve(__dirname, './dll'),
    filename: '[name].js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.resolve(__dirname, './dll/vendor.manifest.json')
    })
  ]
  // ...
})
複製程式碼

上面配置打包會在 build 目錄下生成 dll 目錄，裡面有 vendor.dll.js 和 vendor.manifest.json

然後在 config.dev.js 中，引入 DllReferencePlugin，就可以了

DllReferencePlugin配置

{
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor.manifest.json')
    })
  ]
}
複製程式碼

這樣，在專案中 webpack 處理 vue vue-router vue-i18n clipboard時，就不會去node_modules中拿了，會直接用 vendor.js

再次執行 npm run dev 發現時間也只少了 1s(我覺得其實是時間的小波動...根本不會少的) 畢竟大頭不在這。

單元件的開發模式

後來突然想到，好像每次開發元件的時候，不都是單個單個來的嗎，既然這樣，我只處理指定元件的md檔案，速度不就起來了嗎。

嗯，這或許是個辦法，試試水

找到引入 md 檔案的地方，也就是 examples/route.js，部分程式碼如下

function loadDocs(path) {
  return r => require.ensure([],
    () => r(require(`./docs${path}.md`))
  );
}
複製程式碼

這個是 vue-router 的動態載入，嗯，只要我把path給寫成一個固定的路徑（這裡其實就是'/' + 元件名），不就能實現了嗎。

執行命令大概是長這樣的

// package.json
{
  "scripts": {
    "dev:component": "cross-env RUN_ENV=component node build/dev-server.js",
  }
}
複製程式碼

由於在命令列中使用webpack-dev-server沒有辦法傳遞引數給process.argv，所以這裡採用webpack-hot-middleware

// build/dev-server.js
const webpack = require('webpack');
const webpackConfig = require('./config.dev');
const express = require('express');

webpackConfig.plugins = webpackConfig.plugins || [];

// 全域性開發模式採用webpack-dev-server 無需配置hmr，這裡需要單獨給上
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.entry.push('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000');

const compiler = webpack(webpackConfig);
const hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: false
});

const devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true,
  logLevel: 'silent'
});

const app = express();
app.use(hotMiddleware);
app.use(devMiddleware);
app.use('/build', express.static('./build'));

app.listen(webpackConfig.devServer.port || 8089, '127.0.0.1', () => {
  console.log('Starting server on http://localhost:8089');
});
複製程式碼

然後採用webpack的 DefinePlugin 動態寫入一個元件名就搞定了，大致的思路是這樣的。部分實現如下：

const component = process.argv[2];

// 先判斷一下是不是單元件開發模式，是的話，必須指定執行的元件
if (process.env.RUN_ENV === 'component' && !component) {
  throw new Error('component is required, like: npm run dev:component slider');
}

// 然後通過DefinePlugin寫入
// 對了這裡有個要注意的點，path是個變數，不是字串，所以不能是"'path'"，真tm機智。
// config.dev.js
{
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: "'development'",
        RUN_ENV: process.env.RUN_ENV === 'component' ? "'component'" : "''",
        component: process.env.RUN_ENV === 'component' ? JSON.stringify('/' + component) : 'path'
      }
    })
  ]
  // ...
}

// 然後再把 `route.js` 的原始碼改下

function loadDocs(path) {
  return r => require.ensure([],
    () => r(require(`./docs${process.env.path}.md`))
  );
}

複製程式碼

萬事俱備，趕緊跑起來

> DONE Compiled successfully in 10792ms
複製程式碼

不錯不錯，只需要10s了，開啟瀏覽器看看，也沒問題。嗯不錯。

關掉服務，試試看原來的 dev 命令是不是也沒問題，嗯，終端是沒問題，但是瀏覽器上報錯了 ???(黑人問號臉)

好像是 webpack 不能正常的處理，最後是改成了下面這樣才能正常工作

function loadDocs(path) {
  return r => require.ensure([],
    () => {
      if (process.env.RUN_ENV === 'component') {
        r(require(`./docs${process.env.component}.md`));
      } else {
        r(require(`./docs${path}.md`));
      }
    }
  );
}
複製程式碼

另外，除了md檔案只需要處理一個元件的之外，元件原始碼也有很多是不需要處理的，所以，繼續修改下程式碼

應用的入口處將全域性引入ui庫的方式換成按需

// 原來的程式碼
import Vue from 'vue'
import gsui from 'components'
// ...
Vue.use(gsui)
複製程式碼

// 修改後的
import Vue from 'vue'
// ...

if (process.env.RUN_ENV === 'component') {
  // 一些頁面共用的元件
  // 只能用require 不能import 因為是靜態處理
  Vue.use(require(`components/submenu`).default);
  Vue.use(require(`components/menu`).default);
  Vue.use(require(`components/layout`).default);
  Vue.use(require(`components/menu-item`).default);
  Vue.use(require(`components/header`).default);
  Vue.use(require(`components/icon`).default);
  Vue.use(require(`components/tooltip`).default);
  Vue.use(require(`components/modal`).default);
  Vue.use(require(`components/message`).default);

  Vue.use(require(`components${process.env.component}`).default);
} else {
  // 不是單元件開發模式引入全部
  Vue.use(require('components').default);
}

複製程式碼

優化後的單元件開發模式和全域性開發模式的對比

但是很快就感到不實用，因為有很多元件是需要依賴其他元件的，有時候需要看其他元件的文件，單元件模式就沒法做到了

只能再找別的手段了

意外發現，原來是vue-loader的版本原因帶來的效能消耗

前天也不知道在哪發現了一個UI庫 at-ui，下意識點進去看了下他們的構建配置，發現和我們的很像（其實webpack配置也都差不多的），也是用了 vue-markdown-loader ，出於好奇，clone了下來本地構建了一下。結果出乎意料，他們的構建只需要 16s 16s 16s 怎麼會差這麼多，看了下他們的文件，還是中文和英文雙份的（我們的元件庫暫時沒有英文文件），雖然元件沒有我們的多，但是文件絕對是多幾十個的，而且耗時不也是在md檔案的解析上嗎(再次問號臉)。再仔細看了他們的配置和對md檔案的處理，確實對md檔案的處理程式碼會少很多，但是這是因為支援的寫法不同，而且也不至於導致時間相差那麼多。

找不出原因，乾脆用他們的配置來構建我們的專案試試看吧。把build目錄完全copy了過來，修改了一點配置如 entry alias，安裝一些這邊不存在的依賴，其他基本都不需要動了，總之跑起來看看。

磕磕碰碰修改幾個報錯問題後，跑起來了，但是時間還是沒變(37s)，奇了怪了。再試試另一種，用我們的配置去跑他們的專案看看。

把他們專案的src和docs目錄copy了過來，同樣把我們的配置修改一些配置 entry alias 再加點loader，他們需要處理yml檔案，跑起來看看。結果更納悶了，時間是40s（再次問號臉）。最後在我們的專案中，用他們的配置去跑他們的專案，我這想驗證一件事，會不會是某個依賴的版本不同引起的，結果確實是這麼回事...

接下來就是找出是哪個依賴帶來的了，這裡需要注意一點package.json中依賴的版本如^1.0.0，以 ^ 開頭的依賴，安裝時總是會按照這個大版本下的最新版本的也就是 ^1.0.0 ^1.1.0 都是裝 1.x 下的最新版本。而 ^1.0.0和^2.0.0 才是不一樣的。最後主要嘗試的幾個不同版本依賴主要有 webpack(2.x和3.x) vue-markdown-loader(1.x和2.x)，但是這兩個換掉之後還是很慢，最後在同事的提醒下，可能是 vue-loader 因為 vue-markdown-loader 是依賴 vue-loader的，而且無論是 1.x還是2.x 都是用的 vue-loader 12.x 的版本，而我們用的是 13.x 最後功夫不負有心人，是從 vue-loader 的 v13.1.0 開始，構建速度會變慢。

變慢的原因

下面這個結果是公司的一位牛人發現的

最後發現是 v13.1.0 以上的 vue-loader 採用 prettier 來格式程式碼，替代了原來的 js-beautify，是這個導致了效能問題。

最後的配置

// config.base.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: utils.resolve('./postcss.config.js')
              }
            }
          }
        ]
      },
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          use: [
            utils.mdAnchor,
            utils.demoContainer,
            utils.tipContainer
          ],
          preprocess: utils.mdPreprocess
        }
      },
      {
        test: /\.scss$/,
        use: 'happypack/loader?id=scss'
      },
      {
        test: /\.jsx?$/,
        exclude: exclude: [/node_modules/, /^dll$/],
        use: 'happypack/loader?id=babel',
        include: [utils.resolve('./components'), utils.resolve('./examples'), utils.resolve('./test')]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?(#.*)?$/,
        loader: 'url-loader?name=[name].[hash].[ext]'
      },
      {
        test: /\.vue$/,
        // use: 'happypack/loader?id=vue'
        loader: 'vue-loader',
        options: {
          loaders: {
            css: 'style-loader!css-loader!sass-loader',
            js: 'happypack/loader?id=babel'
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss', '.css'],
    alias: {
      'gs-ui': utils.resolve('./'),
      components: utils.resolve('./components'),
      examples: utils.resolve('./examples')
    }
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      threads: 4,
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'scss',
      threads: 4,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            config: {
              path: utils.resolve('./postcss.config.js')
            }
          }
        },
        'sass-loader'
      ]
    })
  ]
};
複製程式碼

// config.dev.js
module.exports = merge(config, {
  entry: entry,

  output: {
    path: '/',
    publicPath: '',
    filename: '[name].js'
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: "'development'",
        RUN_ENV: process.env.RUN_ENV === 'component' ? "'component'" : "''",
        component: process.env.RUN_ENV === 'component' ? JSON.stringify('/' + component) : 'path'
      }
    }),
    new HtmlWebpackPlugin({
      template: utils.resolve('examples/index.html'),
      filename: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin(),
    new OpenBrowserPlugin({
      url: 'http://localhost:' + PORT
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor.manifest.json')
    })
  ],

  devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: PORT,
    quiet: true,
    hot: true,
    historyApiFallback: true
  },

  devtool: 'cheap-eval-source-map'
});
複製程式碼

最後優化後的構建速度 16-17s，結果還是比較理想的，

結語

最後發現是依賴版本帶來的構建效能問題，不能算是webpack構建的優化。算是一個踩坑吧

其他在專案中可以用到的優化點應該主要就是 happypack dll了，能夠有效的提升構建速度，其他還需要多多嘗試

JVM 優化經驗總結
2015-07-17
JVM優化
webpack優化總結
2018-09-28
Web優化
webpack--效能優化之打包構建速度和程式碼除錯優化
2022-03-11
Web優化除錯
webpack 前端構建效能優化策略小結
2017-05-21
Web前端優化
SQL 優化經驗總結34條
2015-01-19
SQL優化
SQL優化經驗總結34條
2013-03-18
SQL優化
Android Note - 構建速度優化
2019-03-26
Android優化
經驗總結：登入和優化IBM DB2的執行速度
2008-08-20
優化IBMDB2
Java集合類操作優化經驗總結
2015-08-08
Java優化
SQL優化經驗總結34條(一)
2012-02-07
SQL優化
SQL優化經驗總結34條(二)
2012-02-07
SQL優化
vue-cli2 構建速度優化
2019-01-07
Vue優化
優化AndroidStudio的構建速度
2017-11-05
優化Android
遊戲開發效能優化經驗總結
2015-05-09
遊戲開發優化
使用OpenStack構建Packet平臺的經驗總結
2015-01-31
優化 Webpack 構建效能的幾點建議
2017-12-27
優化Web
優化Webpack構建效能的幾點建議
2017-12-26
優化Web
優酷 Android 構建速度優化實踐
2021-12-27
Android優化
[譯] 優化 WEBPACK 以更快地構建 REACT
2019-03-02
優化WebReact
Android 優化APP 構建速度的17條建議
2017-03-16
Android優化APP
Android 優化 APP 構建速度的 17 條建議
2017-03-22
Android優化APP
提高 webpack 構建 Vue 專案的速度
2017-04-05
WebVue
總結幾個webpack打包優化的方法
2019-11-26
Web優化
Webpack 4 構建大型專案實踐 / 優化
2019-07-09
Web優化
【前端構建】WebPack例項與前端效能優化
2016-03-03
前端Web優化
用實驗的思路優化webpack4專案編譯速度
2018-09-01
優化Web編譯
oracle 最佳化經驗總結
2008-06-19
Oracle
Webpack4+Babel7優化70%速度
2019-02-27
WebBabel優化
9大效能最佳化經驗總結，強烈建議收藏！
2022-08-17
iOS 啟動速度優化和安裝包優化簡單總結
2019-04-14
iOS優化
使用 happypack 提升 Webpack 專案構建速度
2019-02-21
APPWeb
Webpack DllPlugin 讓構建速度柔順絲滑
2019-03-13
WebPlugin
使用 Webpack 的 DllPlugin 提升專案構建速度
2019-02-15
WebPlugin
Kotlin專案中 GlideApp 構建失敗經驗總結
2018-10-18
KotlinIdeaAPP
Android 應用構建速度提升Gradle配置優化
2020-10-08
AndroidGradle優化
效能優化小冊 - 分類構建：利用好 webpack hash
2020-05-18
優化Web
Vue專案Webpack優化實踐，構建效率提高50%
2018-12-23
VueWeb優化
webpack構建優化：縮小檔案搜尋範圍
2018-10-30
Web優化