当前位置: 首页 > Web前端 > vue.js

webpack3.x升级4.x之后打包速度优化

时间:2023-04-01 00:27:13 vue.js

webpack3.x升级到4.x后打包速度优化),以及二次打包时间(缓存)。打包分析在优化之前,我们需要知道项目打包的性能。这里我们使用speed-measure-webpack-plugin插件来分析webpack.base.js+constSpeedMeasurePlugin=require('speed-measure-webpack-plugin');+constsmp=newSpeedMeasurePlugin({+outputFormat:'humanVerbose'+});constwebpackConfig=merge(baseWebpackConfig,{//..});-module.exports=webpackConfig;+module.exports=smp.wrap(webpackConfig);看一下包,这次用了62361ms,列出了Plugins和Loaders的具体耗时情况:图片比较长但是可以看出最耗时的是vue-loader的搜索时间而ts-loaderOptimization-exclude/includewebpack从入口文件开始,根据依赖寻找模块。我们需要处理尽可能少的模块。最常见的是排除exclude:/node_modules/。当exclude和include同时使用时,exclude优先级更高webpack.base.jsmodule.exports={module:{rules:[{test:/\.vue$/,loader:"vue-loader",},{test:/\.js$/,loader:"babel-loader",//确保node_modules中Vue单文件组件的