[JavaScript] 我是如何把vue项目启动时间从70s优化到7秒的

• 多进程处理文件，同一时间处理多个文件
• 预编译资源模块，比如把长时间不变的库提取出来做预编译，构建的时候直接取编译结果就好
• 缓存，未修改的模块直接拿到处理结果，不必编译
• 减少构建搜索和处理的文件数量
  

• loader无法发出文件。
• loader不能使用自定义加载器API。
• loader无法访问网页包选项。
  

const threadLoader = {
  loader: 'thread-loader',
  options: {
  workers: require('os').cpus().length - 1,
  }
}
module.exports = {
  module:{
  rules: [
    {
    test: /\.vue$/,
    use: [
      threadLoader, // vue-loader前使用该loader
      {
      loader: 'vue-loader',
      options: vueLoaderConfig
      }
    ],
    },
    {
    test: /\.js$/,
    use: [
      threadLoader, // babel-loader前使用该loader
      {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
      }
    ]
    }
  ]
  }
}

const cacheLoader = {
  loader: 'cache-loader'
}
const threadLoader = {
  loader: 'thread-loader',
  options: {
  workers: require('os').cpus().length - 1,
  }
}
module.exports = {
  module:{
  rules: [
    {
    test: /\.vue$/,
    use: [
      cacheLoader,
      threadLoader, // vue-loader前使用该loader
      {
      loader: 'vue-loader',
      options: vueLoaderConfig
      }
    ],
    },
    {
    test: /\.js$/,
    use: [
      cacheLoader,
      threadLoader, // babel-loader前使用该loader
      {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
      }
    ]
    }
  ]
  }
}

const cacheLoader = {
  loader: 'cache-loader'
  }
  
  function generateLoaders(loader, loaderOptions) {
  // 在css-loader前增加cache-loader
  const loaders = options.usePostCSS ? [cacheLoader, cssLoader, postcssLoader] : [cacheLoader, cssLoader]
  if (loader) {
    loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
    })
  }
  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    // 添加这句配置解决element-ui的图标路径问题
    publicPath: '../../'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
  }

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  //...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

module.exports = {
  module: {
  rules: [
    {
    test: /\.js$/,
    use: [
      ...
      {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true // 开启缓存
      }
      }
    ]
    }
  ]
  }
}