由于新建项目发布打包需要30分钟左右，严重拖慢了发布过程中的下班时间，所以专门查看相关文件，优化打包速度，争取早点下班。

分析打包的文件

要优化，先分析。我们需要知道是什么降低了我们的包装速度。

打包后生成的文件分析

webpack-bundle-analyzer插件可用于分析打包后生成的文件

装置

网络包包包分析器

使用

修改webpack.prod.conf.js文件

常量包分析器插件=必需('网络包-包-分析器')。bundle Analyzer Plugin//构建完成后，浏览器将自动打开localhost :8080 webpackkconfig . plugins . push(新的bundle Analyzer Plugin({ Analyzer port 33608080，generatestartsfile : false })

通过图片可以看到打包文件的具体信息

打包进度条显示您可以查看打包进度百分比

简单进度网络包插件可以显示打包百分比

装置

使用NPM一号简单进度网络包插件

修改webpack.prod.conf.js文件

const simpleprogresswebpackplugin=require(' simple-progress-web pack-plugin ').plugins :[new simpleprogresswebpackplugin()].效果如下：

资源和依赖包的控制

从上面的进展可以看出，在包装过程中，压缩的地方太长了。当项目变得越来越臃肿时，我们需要整理项目的静态资源和依赖包。

太大的图像可以压缩。这里有一个很好的压缩链接。

可以删除项目中未使用的依赖项，并且可以按需引用依赖项。项目中使用的ElementUI和Echarts的所有引用都挂在Vue.prototype上，现在都是按需引用。缩小文件搜索范围

设置resolve.alias字段，以避免在打包过程中使用相对路径访问或导入文件时逐层查找解析的文件

Resolve : { alias : { ' @ ' : Resolve(' src ')} }合理配置扩展扩展

Resolve.extensions可以自动解析某些扩展。但是，如果扩展太多，就会导致解析过程太多。所以要合理配置扩展，不要太多扩展。项目引用了很多文件，扩展名放在最前面。我们的项目中有很多vue和js文件，所以只能参考这两个文件。

resolve : { Extensions :[]。vue '，'。js']} Loader预处理文件添加包含以匹配特定条件

在预处理各种文件时指定匹配目录后，webpack在解析文件时不会循环搜索其他目录，从而加快解析速度。

Happypack多线程执行

Webpack在预处理文件时是单线程的，所以我们可以使用happypack来多线程处理文件。

装置

npm i happypack -D

使用

修改webpack.base.js文件

const happyThreadPool=HappyPack。thread pool({ size: OS . CPU()。长度})；module : { rule 3360 [{ test :/。js$/，loader: 'happypack/loader？Id=babel '，//原始加载程序替换为` happypack/loader ` include :[resolve(' src ')]} }，plugin3360 [new happypack ({//id标识要处理的加载程序id: 'babel '。//加载器配置与原始配置相同。加载程序：[{加载程序：' babel-loader '，选项： {预设： ['es2015']，cachedirectory: true}}]，Threadpool : happy Threadpool })]babel-plugin-dynamic-import-node异步加载

babel-plugin-dynamic-import-node插件通过用require替换import()进行编译

装置

npm i巴贝尔-插件-动态-导入-节点-D

使用

修改。babelrc文件

env ' : { ' development ' : { ' plugins ' :[' dynamic-import-node ']}，' production ' : { ' plugins ' :[' dynamic-import-node ']} }注意：没有使用插件构建的区块文件

摘要

经过以上优化，套餐时长从30分钟到2分钟，整体来说还是有优化空间的。可以使用其他优化方法，如cdn和dll。

以上是边肖介绍的Vue项目总结的webpack通用包装的优化方案，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！