跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • Webpack4 + TypeScript 如何优化编译速度?
未分類
14 6 月 2020

Webpack4 + TypeScript 如何优化编译速度?

Webpack4 + TypeScript 如何优化编译速度?

資深大佬 : rabbbit 8

速度有点慢, 有什么办法优化编译速度吗?

当前配置:

webpack.config.js

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin');  const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const smp = new SpeedMeasurePlugin(); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');  module.exports = smp.wrap({   'entry': ['./src/index.ts'],   'output': {     filename: 'main.js',     path: path.resolve(__dirname, 'dist'),   },   'mode': 'development',   'devtool': 'eval-source-map',   'devServer': {     port: '8000',     host: '0.0.0.0',     public: 'localhost:8000',     open: false,     quiet: true,   },   'plugins': [     new ForkTsCheckerWebpackPlugin(),     new webpack.ProgressPlugin(),      new HtmlWebpackPlugin({       template: './src/index.html',       inject: true,       open: false,     }),   ],   'module': {     rules: [       {         test: /.(js|jsx|tsx|ts)$/,         exclude: /node_modules/,         loader: 'babel-loader',       },       {         test: /.(png|svg|jpg|gif)$/,         use: ['file-loader'],       },     ],   },   'resolve': {     extensions: ['.tsx', '.ts', '.js'],   }, }); 

.babelrc

{   "presets": [     "@babel/preset-env",     "@babel/preset-TypeScript"   ],   "plugins": [     "@babel/proposal-class-properties",     "@babel/proposal-object-rest-spread"   ] } 

tsconfig.json

{   "compilerOptions": {     "baseUrl": "./",     "outDir": "./dist/",     "target": "ES2020",     "moduleResolution": "node", // threejs need     "module": "CommonJS",     "esModuleInterop": true,     "noImplicitAny": true,     "sourceMap": true,     "isolatedModules": true,     "strictBindCallApply": true,   },   "exclude": [     "node_modules"   ],   "include": [     "src/**/*.ts",     "types/**/*.d.ts"   ] } `` 

大佬有話說 (3)

  • 資深大佬 : Jirajine

    你可以试试 esbuild: https://github.com/evanw/esbuild

  • 資深大佬 : alan0liang

    至少上个 cache-loader 吧

  • 資深大佬 : BlackHole1

    不考虑继续使用 webpack 的话,就用 esbuild 。

    如果想继续使用 webpack,方法:
    1. 使用 thread-loader
    2. 升级 webpack 及周边所有的 package
    3. 如果使用到了 nodejs addon 这些东西的(例如 node-sass)话,就配合 ccache,加快构建 C++的速度

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具