vue中webpack如何提升打包速度

最新推荐文章于 2024-02-27 21:52:39 发布

我捡了她的猫

最新推荐文章于 2024-02-27 21:52:39 发布

阅读量1.3k

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/dcl199728/article/details/128467617

版权

使用 webpack-parallel-uglify-plugin 插件来压缩代码
优化原理
- 默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢
- 我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间

操作步骤

执行如下命令安装 webpack-parallel-uglify-plugin

cnpm i webpack-parallel-uglify-plugin -D
// 指定版本 "webpack-parallel-uglify-plugin": "1.1.0"

打开 build/webpack.prod.conf.js 文件，并作如下修改：

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

// 删掉 webpack 提供的 UglifyJS 插件
// new UglifyJsPlugin({
    //   uglifyOptions: {
    //     compress: {
    //       warnings: false
    //     }
    //   },
    //   sourceMap: config.build.productionSourceMap,
    //   parallel: true
    // }),
    // 增加 webpack-parallel-uglify-plugin来替换
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS: {
        output: {
          comments: false
        },
        warnings: false
      }
    }),

使用 HappyPack 来加速代码构建
运行在 Node.js 之上的 Webpack 是单线程模式的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。
而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。

操作步骤

执行如下命令安装 happypack：
```
cnpm i happypack os -D
```
打开 build/webpack.base.conf.js 文件，并作如下修改：

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
    ]
  },
  plugins: [
    new HappyPack({
      // 用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      // 如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true'
      }],
      // 共享进程池
      threadPool: happyThreadPool,
      // 允许 HappyPack 输出日志
      verbose: true
    })
  ],

}