webpack优化打包速度

webpack打包速度太慢


优化

  • 1.多线程打包 js压缩和loader
  • 2.优化启动速度 hard-source-webpack-plugin
  • 3.删除无用的 分析类插件
  • 4.DllPlugin通道打包

1.webpack多线程打包 loader

loader 使用 thread-loader 将他放置你要使用的loader前面就行,不过这个lorder例如style-loader不支持的,而且面对比较快的loader也不建议使用,会降低速度

{
        test: /\.vue$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 4,
              workerParallelJobs: 50,
              poolParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          {
            loader: "vue-loader",
            options: vueLoaderConfig
          }
        ]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 4,
              workerParallelJobs: 50,
              poolParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          "babel-loader?cacheDirectory"
        ],
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },

2.webpack多线程打包 js压缩

使用terser-webpack-plugin或ParallelUglifyPlugin 替换UglifyJsPlugin

UglifyJsPlugin 是单线程工作的 设置parallel: true也可以开启多线程

不过这个我测试了下打包速度感觉并没有提高很多

旧 parallel: true也可以开启多线程
new UglifyJsPlugin({
        uglifyOptions: {
          mangle: {
            safari10: true
          },
          compress: {
            // warnings: process.env.env_config === 'pre' || process.env.env_config === 'prod',
            drop_console: process.env.env_config === 'pre' || process.env.env_config === 'prod',  //注释console
            drop_debugger: process.env.env_config === 'pre' || process.env.env_config === 'prod', //注释debugger
            pure_funcs: process.env.env_config === 'pre' || process.env.env_config === 'prod'?['console.log']:[], //移除console.log
          },
        },

        // 降低编译速度 此处需要注意。若是在使用了UglifyJSPlugin且开启sourceMap后,需要同时给devtool设置值。同样的若是设置了devtool的值,则UglifyJSPlugin也需要开启sourceMap。否则不会生成.map的源代码对应文件。
        sourceMap: config.build.productionSourceMap,
        cache: true,
        parallel: true
      }),
      
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
// / 代码压缩新
      new ParallelUglifyPlugin({
          // 传递给 UglifyJS 的参数
          // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
          uglifyJS: {
              output: {
                  beautify: false, // 最紧凑的输出
                  comments: false, // 删除所有的注释
              },
              compress: {
                drop_console: process.env.env_config === 'pre' || process.env.env_config === 'prod',  //注释console
                drop_debugger: process.env.env_config === 'pre' || process.env.env_config === 'prod', //注释debugger
                pure_funcs: process.env.env_config === 'pre' || process.env.env_config === 'prod'?['console.log']:[], //移除console.log
              },
              // 降低编译速度 此处需要注意。若是在使用了UglifyJSPlugin且开启sourceMap后,需要同时给devtool设置值。同样的若是设置了devtool的值,则UglifyJSPlugin也需要开启sourceMap。否则不会生成.map的源代码对应文件。
              sourceMap: config.build.productionSourceMap,
              // cache: true,
          }
      }),

3. hard-source-webpack-plugin 优化启动速度

npm i hard-source-webpack-plugin -D

进行文件的热加载的,一个项目启动或者打包的时间,超过40s的时候,可以进行项目的优化和热加载。

注意:第一次启动会很慢,不改配置都会使用缓存启动,第二次很快,不过第一次加载时间会比不用此插件慢1倍,还有就是build的时候貌似没什么效果,所以慎用!

const HardSourceWebpackPlugin=require('HardSourceWebpackPlugin')
插件中使用
new HardSourceWebpackPlugin(),

4.删除无用的 分析类插件

例如 speed-measure-webpack-plugin 分析打包各个阶段花费的时长,这个很坑,打包会非常慢,不调试的话直接去掉

5.DllPlugin通道打包 动态链接库

将一些固定的插件 例如element vue等单独抽离打一个包 直接在html里引用

具体实现参考我另一篇

https://blog.csdn.net/qq_38935512/article/details/112517327

进入 搜索 动态链接库

优化

一套下来,最主要有效果的感觉还是

删除无用的 分析类插件 和 动态链接库

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json