webpack-打包优化方案
发布网友
发布时间：2022-09-07 21:17
共1个回答
热心网友
时间：2024-05-05 23:59
分析打包文件
要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？
可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件
修改 webpack.prod.conf.js 文件
simple-progress-webpack-plugin 可以显示打包百分比
修改 webpack.prod.conf.js 文件
效果如下：
资源与依赖包的控制
通过上面进度可以看到，打包过程中，卡顿在压缩的地方过长，当项目越来越臃肿的时候，我们要需要对项目静态资源以及依赖包进行整理，
项目里面使用 ElementUI 和 Echarts 都是全部引用挂在 Vue.prototype 上，现都改为按需引用。
预处理各种文件时指定匹配目录后， webpack 解析文件时就不会循环查找其他目录，加快解析速度。
webpack 执行预处理文件时单线程的，我们可以使用 happypack 来多线程处理文件。
修改 webpack.base.js 文件
babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译
修改 .babelrc 文件
注意：使用插件 build 后没有 chunk files 文件。
通过 DllPlugin 插件分离出第三方包
使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。
需要注意
项目经过以上优化，打包从30分钟，到2分钟不到，整体还有优化空间，可以使用其他 cdn 等优化方式。
