高速ビルドで取り組んでいること

2019/06/22

v-kansai #7 Short LT

jiyuujin

  • Vue/Nuxt/PHP/Scala/Java/Swift
  • v-kansai/kansai.ts/..
  • Web猫ブログ (webneko.dev)

前回は Monaca UG共催

ブログだけでなく

最近はお仕事でも

  • StorybookをVue(TS)で書く
  • Google Apps ScriptをTSで書く
  • 最近はReactを使った職務経歴など

ビルド時間

遅いと感じてる人🤔

TSコンパイルは辛い。

yarn watch

{
  "scripts": {
    "storybook": "start-storybook -p 6106",
    "watch": "webpack --progress --config=.storybook/webpack.config.js --watch",
    "build-storybook": "build-storybook",
  },
}

とあるビルドで3分が、

1分に劇的短縮

差分ビルドは強い!

より速くをモットーに

fork-ts-checker

型チェックと並行して

{
    loader: 'ts-loader',
    options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true
    },
}

型チェックを別プロセスで

module.exports = {
    chainWebpack: config => {
        config
            .plugin('fork-ts-checker')
            .tap(args => {
                args[0].memoryLimit = 3072;
                args[0].workers = 2;
                return args;
            });
    },
}

キャッシュを利用

ForkTSと相性は良さそう

const HardSource = require('hard-source-webpack-plugin')

plugins: [
  new HardSource()
]

影響範囲を指定した方が?

{
    test: /\.(ts|tsx)$/,
    use: [
        {
            loader: 'cache-loader',
            options: {
                cacheDirectory: path.resolve(
                    __dirname,
                    'node_modules/.cache/cache-loader'
                )
            }
        }
    ]
}

マルチスレッドで

並列ビルドを可能に

worker poolで型チェック

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader"
        ]
      }
    ]
  }
}

約3割早くなった

引き続き高速化を追求

解決策あれば🙇‍♀️

見せられる範囲で🙏

htps://github.com/jiyuujin/admin

#8 は chatbox新オフィスで

Vue Fes前に秋田へ

ご清聴ありがとうございました🙇‍♀️

高速ビルドで取り組んでいること #v_kansai

By jiyuujin

高速ビルドで取り組んでいること #v_kansai

Vue + TypeScriptを使っている中でビルド高速化への挑戦は続く

  • 382
Loading comments...

More from jiyuujin