ã¯ããã« ãŸãã¯webpack esbuild swc Snowpack Vite ãŸãšã ã¯ããã« ããã«ã¡ã¯ãããã³ããšã³ãããŒã ã®å²¡å±±ã§ãã ç§ã®æ
åœãããããžã§ã¯ãã§ã¯çŸåšVue2ã䜿ã£ãŠãããwebpack(vue- cli )ã䜿ã£ãŠãã«ããè¡ã£ãŠããŸãã webpackèªäœã¯éåžžã«æçšãªããŒã«ã§ã¯ãããŸããããããŠäžæºãæãããªããã«ããé
ãããšã§ãããã ãã£ãã·ã¥ãåŠçã®äžŠååãªã©ãé«éåã®ããã«ãã«ãèšå®ã®æé©åãè¡ã£ãŠã¯ããŸããããã§ãé
ãã§ãã å°ãããããžã§ã¯ãã§ã¯æ°ã«ãªããªããŠãã倧ãããªããšãšãã«ãã®åé¡ãé¡åšåããç¡èŠã§ããªããªããããããŸããã ãã®èšäºã§ã¯é«éãªãã«ããå¯èœã«ããæ°èå¢åãããã€ãã玹ä»ããŸãã ãŸãã¯webpack æ¯èŒå¯Ÿè±¡ããªããšè©äŸ¡ãã«ããã®ã§ãæåã«webpack5 + ts-loaderã䜿ããŸãã React + TypeScript + Material UIã§äœããã ãµã³ãã«ãããžã§ã¯ã ããã«ãããŠã¿ãŸãã TypeScriptã®åãã§ãã¯ã¯ fork-ts-checker-webpack-plugin ã䜿ã£ãŠå¥ããã»ã¹ã§è¡ãããã«ããŸãã // webpack.config.js const path = require( 'path' ) const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' ) const loaders = { ts: 'ts-loader' } const loaderOptions = { ts: { transpileOnly: true } } module.exports = (env = {} ) => ( { mode: process.env.NODE_ENV, entry: './src/index.tsx' , output: { filename: 'index.js' , path: path.resolve(__dirname, 'dist' ), } , module: { rules: [ { test: /\.tsx?$/ , use: { loader: loaders [ env.loader ] , options: loaderOptions [ env.loader ] } , exclude: /node_modules/ , } , ] , } , resolve: { extensions: [ '.tsx' , '.ts' , '.js' ] , } , plugins: [ env.tscheck == 'yes' ? new ForkTsCheckerWebpackPlugin() : false ] .filter( Boolean ), } ) // package.json " scripts ": { " build:webpack-ts ": " webpack --progress --env loader=ts ", " build:webpack-ts-tscheck ": " webpack --progress --env loader=ts tscheck=yes " , } çµæã¯ä»¥äžã®éãã§ããã åŸã§ç޹ä»ããesbuildãšswcã¯åãã§ãã¯ãè¡ããªããããåãã§ãã¯ãè¡ããªãå Žåãèšæž¬ããŠãããŸããã åãã§ã㯠time ãã ~10s ãªã ~4.5s esbuild esbuild ã¯Goã§å®è£
ããã JavaScript /TypeScriptã®ãã«ãããŒã«ã§ãã ãã©ã³ã¹ãã€ã«ãããã³ãã«ããããã¡ã€ãŸã§ãã£ãŠãããŸãããããŠå§åçãªéããèªããŸãã å
¬åŒããã¥ã¡ã³ãã«ãããšãã®éãã¯webpackãRollupã®æ°ååã ãããŸã§ãã«ãã«1åããã£ãŠããå Žåãããã1ç§ãããã«ãªãèšç®ã§ããå§åçã§ãã ãŸããesbuildã«ã¯ ãã©ã°ã€ã³ ãå©çšå¯èœãªããããã«ãããã»ã¹ã®æ§ã
ãªéšåã«åŠçã远å ããããšãå¯èœã§ãã ããã æ¢åã®ãã©ã°ã€ã³ ã¯ãŸã å
å®ããŠããªããããå¿
èŠã«å¿ããŠèªäœããå¿
èŠããããããããŸããã 詳ãã㯠ãã¡ã ãåç
§ãã ããã ããã§ã¯å®éã«esbuildã䜿ã£ãŠåããããžã§ã¯ãããã«ãããŠã¿ãŸãã $ npm i --save-dev esbuild // build.js const { build } = require( "esbuild" ); build( { define: { "process.env.NODE_ENV" : process.env.NODE_ENV } , target: "es2015" , platform: "browser" , entryPoints: [ "src/index.tsx" ] , outdir: "dist" , bundle: true , minify: !process.env.NODE_ENV, sourcemap: process.env.NODE_ENV } ) . catch (() => process.exit(1)) // package.json " scripts ": { " build:esbuild ": " set NODE_ENV= \" development \" && node ./build.js " , } ãã«ãã«ããã£ãæé㯠~0.8s ã»ã©ã«ãªããŸããã éãã§ããæ°ååãšãŸã§ã¯è¡ããŸããã§ãããã4.5ç§ãš1ç§ä»¥äžã¯äœæã§ãçµæ§éããŸãã ãšãŸãéãã®ã¯ããããŸãããããããã¯ããžã®å°å
¥ã«ã¯æžå¿µããããŸãã å
¬åŒãèšã£ãŠããéã ãçŸç¶v1.0.0ã«å°éããŠããªãesbuildã¯production-readyã§ã¯ãããŸããã ããã§webpackãããžã§ã¯ãã«ãæ¯èŒçæ°è»œã«å°å
¥ã§ããã esbuild-loader ã䜿ã£ãŠã¿ãããšã«ããŸãã ããã¯ts-loaderãbabel-loaderã®ä»£æ¿ãšãªãããŒããŒã§ããwebpackã§ã®ãã«ãã§ãesbuildã®äžéšããæè»œã«å©çšããããšãã§ããŸãã $ npm i --save-dev esbuild-loader // webpack.config.js ... const loaders = { esbuild: 'esbuild-loader' } const loaderOptions = { esbuild: { loader: 'tsx' , target: 'es2015' } , } ... // package.json " scripts ": { " build:webpack-esbuild ": " webpack --progress --env loader=esbuild " , } ts-loaderããesbuild-loaderã䜿ãããã«ãããšãã«ãæé㯠~4.2s ã»ã©ã§ããã è¥å¹²éããªã£ã...ã§ãããããããããesbuild-loaderã®å°å
¥ãæ€èšããŠããæ¹ã®ã»ãšãã©ã¯ãã«ãæéã®é«éåãç®çãšããŠãããšæããŸããäžæŠã«ã¯èšããŸããããesbuild-loaderã®å°å
¥ã ãã§ã¯å€§ããªæ¹åã¯é£ãããããããŸããã swc swc 㯠Next.js v11ã«ãçµã¿èŸŒãŸãã JavaScript /TypeScriptãã©ã³ã¹ãã€ã©ã§ãã ãã¡ãã¯Rustã§å®è£
ãããŠããŸããswcåäœã§ã¯ãã³ãã©ãŒãšããŠã®æ©èœã¯æã£ãŠãããããã³ãã«ããã«ã¯ spack çãå©çšããå¿
èŠããããŸãã esbuildãšåãããã«swcã«ãwebpackã§äœ¿çšå¯èœãªããŒã㌠swc-loader ããã£ãã®ã§ãã¡ãã䜿ã£ãŠã¿ãŸããã $ npm i --save-dev @swc/core swc-loader // webpack.config.js ... const loaders = { swc: 'swc-loader' } const loaderOptions = { swc: { sync: true , jsc: { parser: { syntax: "typescript" , tsx : true } } } } ... // package.json " scripts ": { " build:webpack-swc ": " webpack --progress --env loader=swc " , } ãã«ãã«ããã£ãæé㯠~4.1s ã»ã©ã§ãããesbuild-loaderãšåããããªæãã§ããã Snowpack Snowpack ãwebpackãParcelãªã©ã®ãã³ãã©ãŒã®ä»£æ¿ææ®µãšããŠç»å ŽããŸããã webpackãªã©ã®åŸæ¥ã®ãã«ãããŒã«ã¯1ã€ã®ãã¡ã€ã«ãä¿åãããã³ã«ãã¢ããªã±ãŒã·ã§ã³å
šäœãåæ§ç¯ããŠãã³ãã«ããå¿
èŠããããŸããã ããã§Snowpackã¯ïŒéçºæã«ã¯ïŒãã¯ããã³ãã«ãããªããšããã¢ãããŒãããšããŸããã JavaScript ã®ESMãæŽ»çšããããšã§éçºäžã¯ãã³ãã«ããã«åãã¡ã€ã«ãéœåºŠèªã¿èŸŒã¿ãŸããããã«ãããå€§èŠæš¡ãªãããžã§ã¯ãã§ãé«éã«éçºãµãŒããèµ·åããããšãå¯èœã«ãªããŸãã åãã¡ã€ã«ã¯äžåºŠã ããã«ãããããã£ãã·ã¥ãããŸãããã¡ã€ã«ã倿Žããããšãã®ãã¡ã€ã«ã®ã¿ãã«ããããããå·®åæŽæ°ãäžç¬ã§å®äºããŸãã ãŸããSnowpackã«ã¯å
ã»ã©ã玹ä»ããesbuildãçµã¿èŸŒãŸããŠãããããæ¬çªãã«ãæã«esbuildã䜿ã£ãŠãã³ãã«ããããšãã§ããŸãã ãã ããesbuildã¯å
è¿°ã®éãæçããŠããªããšããçç±ã§ webpackãã©ã°ã€ã³ã䜿çšããããšãæšå¥šãããŠããŸã (Rollup ãã©ã°ã€ã³ ããããŸã)ã éçºè
ãšããŠã¯é »ç¹ã«è¡ãããéçºæã®ãã«ãæéãççž®ããããšç¹ã«ãããããããéçºè
äœéšã®åäžãšãããã¯ããžã®å°å
¥ããããã®äž¡æ¹ãå®çŸããŠãããšèšããŸãã $ npm install --save-dev snowpack @snowpack/plugin-webpack // snowpack.config.js module.exports = { mount: { public : { url: '/' , static : true } , src: '/dist' } , plugins: [ [ '@snowpack/plugin-webpack' , ] ] } // package.json " scripts ": { " start ": " snowpack dev ", " build ": " snowpack build " } å®éã«ãã«ãããŠã¿ããšãéçºãµãŒããŒã ~1s ã»ã©ã§èµ·åããŸããåéãã®éãã§ãããå·®åæŽæ°ãªããã¯äžç¬ã§ãã Vite Vite ãSnowpackãšéåžžã«äŒŒãç®çãæã£ãNo-bundleããŒã«ã§ãã äŸåé¢ä¿ã®äºåãã³ãã«ã«ã¯esbuildããæ¬çªãã«ãã§ã¯Rollupã䜿çšããŸãã $ npm install --save-dev vite @vitejs/plugin-react-refresh // vite.config.ts import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import path from 'path' export default defineConfig( { root: './' , plugins: [ reactRefresh() ] , resolve: { alias: { '@/' : path.join(__dirname, './src/' ), } , } , } ) // package.json " scripts ": { " start ": " vite ", " build ": " vite build " } Snowpackãšåæ§ãéçºãµãŒããŒã ~1s ã»ã©ã§èµ·åããŸããã ãŸãšã esbuildã¯ãã©ã³ã¹ãã€ã«ããã³ãã«ãé«éã«åäœããŸãããã®éãã«æ
£ãããwebpackã«ã¯æ»ããããªããªããŸãã ããæ§ã
㪠ãã©ã°ã€ã³ ã䜿ã£ãããçšåºŠã®èŠæš¡ã®webpackãããžã§ã¯ããesbuildã«çœ®ãæãããã®ã¯çŸå®çã«é£ããç¹ãããã§ãããã swcãé«éã§ã¯ãããŸããããããã¯ãã§æ¡çšããã«ã¯spackãçºå±éäžéãããªãšããå°è±¡ãæããŸããããã ãNext.jsãDenoã§ã¯å
éšã§äœ¿ãããŠãããããéçºè
ã¯æèããªããŠããã®æ©æµãåããããããã«ãªã£ãŠããŸãã SnowpackãšViteã¯é«éãªéçºãã«ãã«ããéçºè
äœéšã®åäžãšãå®å®ããwebpackãRollupã«ããæ¬çªãã«ããå
ŒãåããããŒã«ã§ãã ç§ãæå±ããããŒã ã§ã¯Vue2ã䜿ã£ãŠããã®ã§ãVue3ã«äžããã¿ã€ãã³ã°ã«åãããŠViteã®å°å
¥ãã§ããã°ãªãŒãšæã£ãŠããŸãã ããã§ã¯ç޹ä»ããããªãã£ããã®ãããã®ã§ãçããããã²æ§ã
ãªãã«ãããŒã«ã調ã¹ãŠã詊ãã«ãªã£ãŠã¿ãŠã¯ãããã§ããããã ãšã³ãžã㢠äžéæ¡çš ãµã€ã ã©ã¯ ã¹ã§ã¯ããšã³ãžãã¢ã»ãã¶ã€ããŒã® äžéæ¡çš ãç©æ¥µçã«è¡ã£ãŠãããŸãïŒ ãèå³ãããŸãããæ¯éã確èªããé¡ãããŸãã https://career-recruit.rakus.co.jp/career_engineer/ ã«ãžã¥ã¢ã«é¢è«ãç³èŸŒã¿ãã©ãŒã ã©ã®è·çš®ã«å¿åããã°è¯ããããããªããšããæ¹ã¯ãã«ãžã¥ã¢ã«é¢è«ãéæè¡ã£ãŠãããŸãã 以äžãã©ãŒã ãããç³èŸŒã¿ãã ããã rakus.hubspotpagebuilder.com ã©ã¯ ã¹Developersç»é²ãã©ãŒã https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ ã€ãã³ãæ
å ± äŒç€Ÿã®é°å²æ°ãç¥ãããæ¹ã¯ãæ¯é±éå¬ããŠããã€ãã³ãã«ãåå ãã ããïŒ âTECH PLAY techplay.jp âconnpass rakus.connpass.com