如何优化webpack 的打包速度，减少webpack的打包体积

- 安装clean-webpack-plugin,每次打包后就会清理指定的文件夹。配置时不需要写里面的路径。

npm install clean-webpack-plugin -D

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins:[new CleanWebpackPlugin()]

- *引入CDN服务器。

1. 将打包的所有静态资源放到CDN服务器。让用户所有资源都通地CDN服务器加载。
2. 对于第三方库，可以通过直接引入的方法来减少打包时间。 help.aliyun.com/zh/cdn/user…

- 利用插件分包SplitChunks

自己总结分包的资源

分包学习资料

SplitChunks分包配置

• 使用代码压缩插件UglifyJsPlugin

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          //生产环境自动删除console
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          }
        },
        sourceMap: false,
        parallel: true  //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1
      })
    ]

- CSS压缩

npm install css-minimizer-webpack-plugin -D

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

  // 仅在生产环境下开启css优化
  optimization:{
    minimizer:[
      new cssMinimizerPlugin({
        parallel: true
      })
    ]
  }
  
  //  开发环境下
  optimization:{
    minimizer: true
  }

- 减少文件数量

1. 尽量减少打包的文件数量，
2. 可以通过按需引入来解决
3. 使用动态导入模块 import()函数

- 启用tree-shaking

使用ES6模块导入和导出，在webpack配置中开启tree shaking功能，消除未使用的代码，减少打包体积。

tree-shaking

- 开启缓存

利用Webpack的缓存机制来避免重复构建未改变的模块。可以使用cache-loader或babel-loader的缓存选项来提高构建性能。