webpack打包优化

此次优化主要使用了happypack和cache-loader两个打包的插件

happypack

在使用 Webpack 对项目进行构建时，会对大量文件进行解析和处理。当文件数量变多之后，Webpack 构件速度就会变慢， Happypack 作用在 loader 上， 可以将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度。

⚠️在测试 Demo 或者小型项目中，使用 happypack 对项目构建速度的提升不明显，甚至会增加项目的构建速度, 在比较复杂的大中型项目中，使用 happypack 才能看到比较明显的构建速度提升

• 使用

 npm install happypack --save-dev (安装)

//在webpack.base.config.js文件里面
const HappyPack = require('happypack');

module.exports = {
    ...
    module: {
        rules: [
            test: /.js$/,
            // 用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            include: [resolve('src')]
        ]
    },
    plugins: [
        ...,
        new HappyPack({
            /*
             * 必须配置
             */
            // id 标识符，要和 rules 中指定的 id 对应起来
            id: 'babel',
            // 需要使用的 loader，用法和 rules 中 Loader 配置一样
            // 可以直接是字符串，也可以是对象形式
            loaders: ['babel-loader']
        })
    ]
}

• 效果
  bulid time 减少了大约 10%-20%左右

cache-loader

在一些性能开销较大的 loader 之前添加cache-loader，会将结果缓存到磁盘里， 因为要写入到磁盘上，所以第一次的 build 会比原本还要多花一些时间，但是第二次 build 就会减少很多的时间。

⚠️ 请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader，经对比发现，对babel-loader和ts-loader使用cache-loader， 效果明显。

• 使用

 npm install cache-loader --save-dev (安装)

//在webpack.base.config.js文件里面
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.js$/,
        // 直接将cache-loader放在需要缓存的loader前面即可
        use: ['cache-loader', 'babel-loader'],
        include: [resolve('src')],
      },
    ],
  },
};

• 效果
  除开第一次build需要花费较长时间外，后面bulid time 减少了大约 20%-40%左右

▶◀除此之外，还修改了原来的打包方式， 原打包方式是会直接删除release文件夹，release文件夹里面包含了dist文件夹， node_modules，server.js等文件，这些都是部署到服务器需要的文件， 删除后会重新生成新的文件， 然后一些第三方的依赖包也要重新下载，这就浪费了很多时间，因为大部分的第三方依赖包是没有什么变化的，所有我们应该保留release文件里面的node_modules文件， 每次只需要下载新的依赖包就可以了，这样会节省很多时间。

//修改前的package.json， 删除了整个release文件夹
"package": "rimraf release && yarn run build && gulp && (cd release && yarn install --prod && tar cvfz package.tar.gz * && mkdir package && mv package.tar.gz package)",

//修改后的package.json， 删除了rimraf release， 保留了release文件夹
"package": "yarn run build && gulp && (cd release && yarn install --prod && tar cvfz package.tar.gz * && mkdir package && mv package.tar.gz package)",

//修改前的gulpfile.js， 清除整个release文件夹
gulp.task('clean', () => del.sync(['release']))

//修改后的gulpfile.js， 删除了release文件夹里面的除了node_modules以外的所有内容，这些被删除的文件会在build后重新生成。
gulp.task('clean', function() {
  return del.sync(['release/**', '!release', '!release/node_modules', '!release/node_modules/**']);
});

• 效果
  效果比较明显，bulid time 减少了大约 20%-30%左右