webpack 打包优化

Webpack是一个模块打包工具，它可以将多个模块打包成一个文件，从而减少HTTP请求和提高页面的加载速度。但是，当项目变得越来越复杂时，Webpack打包时间会变得越来越长，这时候就需要对Webpack进行优化。以下是一些Webpack打包优化的方法：

使用Tree Shaking：Tree Shaking是指删除JS中未使用的代码。通过Tree Shaking可以减少打包后的文件大小，提高页面的加载速度。
使用Code Splitting：Code Splitting是指将代码分割成多个小块，从而实现按需加载。通过Code Splitting可以减少打包后的文件大小，提高页面的加载速度。
使用Webpack的cache和parallelism：Webpack的cache可以缓存已经打包过的模块，从而减少打包时间。同时，Webpack的parallelism可以同时打包多个模块，从而提高打包速度。
使用HappyPack：HappyPack是一个Webpack插件，它可以将Webpack的模块打包过程中的任务分配给多个子进程，从而提高打包速度。
使用DllPlugin：DllPlugin是一个Webpack插件，它可以将第三方库的代码打包成一个独立的文件，并且缓存起来。这样，在每次打包时就不需要重新打包第三方库，从而减少打包时间。
使用CDN：将静态资源放在CDN上，可以减少页面请求的数量，从而提高页面的加载速度。
压缩代码：通过压缩代码可以减少打包后的文件大小，从而提高页面的加载速度。
配置Source Map：Source Map可以将打包后的代码映射回原始代码，从而方便调试和排错。
配置resolve：resolve可以指定Webpack解析模块时的路径和后缀名，从而提高打包速度。
配置externals：externals可以将一些不需要打包的模块从打包过程中排除，从而减少打包时间