高速ビルドで取り組んでいること
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を使っている中でビルド高速化への挑戦は続く
