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

時間  2019-11-06
標籤 組件 webpack 構建 速度 優化 經驗總結 欄目 職業生涯 简体版
原文   原文鏈接

組件庫的webpack構建速度優化

背景

在公司的主要工做是組件庫（基於vue的ui組件庫，相似element-ui）的開發，也已經有兩個多月，期間一直以爲項目的開發構建太慢，每次開發打開開發環境須要 40s 左右，簡直不能忍。前先後後嘗試了各類優化手段，可是都不理想。終於在今天，找到了問題所在，構建速度提高了 50% 以上，如今只須要 17s 左右，整個心情都好了。如今記錄一下所用到的各類優化手段，由於是開發環境，因此只考慮構建速度。css

各類配置項的優化

主要是對一些loader添加 include exclude之類的小優化，其實這一點並無帶來多少性能的提高，只是一些安慰做用吧。html

引入happypack

以前有看到相關文章介紹 happypack 採用多線程處理，能大大提高項目的構建速度。嗯，我以爲這個靠譜。看了下github上的文檔，趕忙試試水。vue

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

// 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）等進行處理，配置都差很少，就不列出來了。webpack

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

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

知道了，優化的主要目標應該是md文件的處理。web

找到了 build/util.js 裏面的一些處理，部分代碼以下vue-router

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組件。express

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

引入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 命令是否是也沒問題，嗯，終端是沒問題，可是瀏覽器上報錯了 ???(黑人問號臉)

err.jpeg
err-source.jpeg

好像是 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，結果仍是比較理想的，

final

結語

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

其餘在項目中能夠用到的優化點應該主要就是 happypack dll了，可以有效的提高構建速度，其餘還須要多多嘗試

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程