在Vue中使用HappyPack
1、介绍HappyPack
由于有大量文件需要解析和处理,构建是文件读写和计算密集型的操作,特别是当文件数量变多后,Webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 Webpack 是单线程模型的,也就是说 Webpack 需要处理的任务需要一件件挨着做,不能多个事情一起做。
文件读写和计算操作是无法避免的,那能不能让 Webpack 同一时刻处理多个任务,发挥多核 CPU 电脑的威力,以提升构建速度呢?
HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
安装HappyPack
// 也可以使用 cnpm 切记下载的时候 happypack 得是小写 npm install --save-dev happypack npm i -D happypack
2、引入HappyPack
这个文章主要讲的是Vue中使用,HappyPack 如果是React 或者其他的 我也不知道。
1.首先的我们要引入到webpack.conf.js 或者是 webpack.base.conf.js 这个文件当中
// 引入 Happpack 可以在 package.json 找到你下载的 const HappyPack = require('happypack'); // 安装 OS 模块 这个主要是拿到当前电脑的CPU核数 const os = require('os'); /* 这个是设置共享线程池中的数量 size 控制设置数量 类型 只能是 整数类型 */ const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
代码中注释掉的为原来的写法
/* 1.在vue模板这个loader中 使用的是 ‘vue-loader‘,但是使用了HappyPack 就要在vue这个HappyPack中定义一个ID值来找到就像 向下面写的 loader: ‘happypack/loader?id=vue’ JS 同理 当你在使用了HappyPack 时千万不要在 原来的里面设置options 要在Happypack中设置 optioons 切记。我的vueLoaderConfig 这个是我自己配置的,这边没做展示,下面有详细的写法。 当你的Vue 文件不多时,Vue的可以不用设置 效果不大。 2. 在js的HappyPack 中使用的babel-loader 和Vue的不一样。 3. cacheDirectory 默认值为 false。当有设置时,指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建,将会尝试读取缓存,来避免在每次执行时,可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。
如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: babel-loader?cacheDirectory=true),loader 将使用默认的缓存目录 node_modules/.cache/babel-loader,
如果在任何根目录下都没有找到 node_modules 目录,将会降级回退到操作系统默认的临时文件目录。 4. cache 默认值为 false , 这个变量在HappyPack 升级到 3.0 或者更高的版本之后就取消这个变量,这个只是我在查文档是看到的就写上试了一下, 状态设置为 true 是 build 就会出现警告。 */
下面的是修改后的写法
module.exports = { context: ..., entry: {...}, output: {...}, resolve: {...}, module: { rules: [ // { // 原版 // test: /\.vue$/, // loader: 'vue-loader', // options: vueLoaderConfig, // }, { test: /\.vue$/, loader: 'happypack/loader?id=vue', // options: vueLoaderConfig, include: [resolve('src')], exclude: /node_modules/, }, // { // 原版 // test: /\.js$/, // loader: 'babel-loaderl', // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')], // }, { test: /\.js$/, loader: 'happypack/loader?id=happyBabel', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')], // include: [resolve('src')], exclude: /node_modules/, }, ], }, plugins: [ new HappyPack({ //用id来标识 happypack处理那里类文件 id: 'happyBabel', //如何处理 用法和loader 的配置一样 // cache: false, loaders: [{ loader: 'babel-loader?cacheDirectory=true', // loader: 'babel-loader', }], //共享进程池 threadPool: happyThreadPool, //允许 HappyPack 输出日志 // verbose: true, }), new HappyPack({ id: 'vue', cache: false, loaders: [{ loader: 'vue-loader', options:vueLoaderConfig }], threadPool: happyThreadPool }), ], node: {...} }
标签:vue,resolve,babel,loader,Vue,HappyPack,使用,happypack From: https://www.cnblogs.com/caihongmin/p/17897151.html