鍍金池/ 問答/HTML/ ts-loader使用happypack后打包更慢了

ts-loader使用happypack后打包更慢了

ts-loader使用happypack后打包更慢了
代碼如下

const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const env = process.argv.slice(-1)[0];

const devUrlLoader = 'url-loader?limit=8192&name=[hash:8].[name].[ext]';
const prodUrlLoader = 'url-loader?limit=8192&name=[hash:8].[name].[ext]&outputPath=assets/images/&publicPath=assets/images';

// 獲取自己定義的要覆蓋antd默認樣式的文件
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, '../src/assets/style/theme.less'), 'utf8'));

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            // loader: 'happypack/loader?id=js',
            loader: 'babel-loader',
          },
          {
            // loader: 'happypack/loader?id=ts',  // 用這個打包速度慢了很多
            loader: 'ts-loader',
          },
        ],
        include: [
          path.join(__dirname, '../src'),
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'happypack/loader?id=js',
            // loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
          }],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.sass$/,
        use: ['style-loader', 'css-loader', 'sass-loader?outputStyle=expanded&indentedSyntax'],
      }, {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader?outputStyle=expanded'],
      },
      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'happypack/loader?id=less_src', // 用這個打包速度慢了很多
          }],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.less$/,
        exclude: /src/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'happypack/loader?id=less_node_modules', // 用這個打包速度慢了很多
          }],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/,
        loader: env === 'development' ? devUrlLoader : prodUrlLoader,
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
      },
    ],
  },
  plugins: [

  ],
  resolve: {
    modules: [
      path.resolve(__dirname, '../src'),
      'node_modules',
    ],
    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
    alias: {
      src: path.resolve(__dirname, '../src/'),
    },
  },
};


const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const lessToJs = require('less-vars-to-js');
const fs = require('fs');

// happypack 加速打包
const HappyPack = require('happypack');
const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const commonConfig = require('./webpack.base.js');

// 獲取自己定義的要覆蓋antd默認樣式的文件
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, '../src/assets/style/theme.less'), 'utf8'));

module.exports = function (env) {
  return merge(commonConfig, {
    cache: true,
    devtool: 'cheap-module-eval-source-map',
    entry: {
      bundle: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8000',
        'webpack/hot/only-dev-server',
        './src/index.tsx',
      ],
      vendor: ['react', 'react-dom'],
      lib: ['antd'],
    },
    output: {
      path: path.join(__dirname, '/../dist/assets'),
      filename: '[name].js',
      publicPath: '/assets/',
      sourceMapFilename: '[name].map',
    },
    devServer: {
      historyApiFallback: true,
      noInfo: false,
      hot: true,
      open: true,
      stats: 'minimal',
      contentBase: './src/',
      publicPath: '/assets/',
      compress: true,
      port: 8000,
      proxy: {
        '/api/*': {
          target: 'http://localhost:9090',
          secure: false,
          changeOrigin: true,
        },
      },
    },
    optimization: {
      runtimeChunk: {
        name: 'manifest',
      },
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new ExtractTextPlugin({
        filename: 'style.css',
        disable: false,
        allChunks: true,
      }),
      new HappyPack({
        id: 'ts',
        threadPool: happyThreadPool,
        loaders: [
          {
            path: 'ts-loader',
            query: { happyPackMode: true, transpileOnly: true },
          },
        ],
      }),
      new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
      new HappyPack({
        id: 'js',
        loaders: ['babel-loader'],
        threadPool: happyThreadPool,
      }),
      new HappyPack({
        id: 'less_src',
        loaders: [{
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true,
            namedExport: true,
            camelCase: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
          },
        }, {
          loader: 'postcss-loader',
        },
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: themeVariables,
          },
        }],
        threadPool: happyThreadPool,
      }),
      new HappyPack({
        id: 'less_node_modules',
        loaders: [{
          loader: 'css-loader',
          options: {
            importLoaders: 1,
          },
        }, {
          loader: 'postcss-loader',
        },
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: themeVariables,
          },
        }],
        threadPool: happyThreadPool,
      }),
    ],
  });
};

      

不明白是為什么,打包反而更慢了,難倒我配置錯了?

這是我的項目,完整的代碼在這里
https://github.com/wanliyunya...

2018/8/9
不僅僅ts慢了,打包less樣式也變慢了。我覺得是我的配置問題呢?。。〈笊駛儙臀铱纯磫h

回答
編輯回答
兮顏

ts-loader options里面加上transpileOnly: true;
然后用fork-ts-checker-webpack-plugin另起線程處理tslint校驗;
速度提升非常明顯。

2018年4月23日 08:51
編輯回答
孤巷

很可能不是配置的問題,幾個項目用下來,只要使用了happypack速度都會變慢,構建速度優(yōu)化效果最佳的始終是基礎代碼剝離

2017年6月25日 12:30
編輯回答
離殤

是首次慢還是每次更改文件都慢?happypack提速的原理之一是緩存,但是這個是建立在你的依賴關系比較清晰的情況下,依賴清晰的意思就是,該用的時候 import,不該用的時候不 import,如果依賴關系特別復雜,可能影響緩存命中率。

雖然說現(xiàn)在我也不折騰 webpack 了,不過從 1.0 用到 3.0 總體的感覺是這樣的,就是如果要提高構建速度,那么使用 webpack 官方提供的一些最佳實踐其實已經(jīng)足夠了,比如 CommonChunk、resolve、alias等,除了配置本身,和你書寫代碼的方式也很有關系,良好的代碼組織方式也有利于構建工具進行自動優(yōu)化。

在這個基礎上,使用 happypack 這種插件也只是錦上添花的而已,它本身并不會瞬間將你的開發(fā)體驗提升一個量級。

希望有所幫助。

2018年7月18日 22:46
編輯回答
安于心

用awesome-typescript-loader替換ts-loader能提高打包速度。

2017年12月12日 03:34