webpack打包优化怎么做（提升webpack打包速度）

Question

如题所述

Answer 1

很多用Vue开发的项目中，都会遇到首屏加载慢，chunk-vendor.js动不动就好几MB，那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个项目，同样的源码，同样的服务器，打开了Disablecache，目前完全加载是6.82秒
优化后，加载时间才2.59秒，提升了60%的加载
其实出发点还是比较好理解的，压缩js和使用CDN因为我这边用的Linux服务器，然后安装的宝塔，使用的Nginx，默认是开启了Gzip，所以我们可以先安装compression-webpack-pluginyarnaddcompression-webpack-plugin或者npminstallcompression-webpack-plugin
然后，我们在vue.config.js中做如下的配置constCompressionWebpackPlugin=requiremodule.exports={productionSourceMap:false,configureWebpack:config={if{//开启gzip压缩config.plugins.push)}}}
这样，Gzip就可以在打包的时候生成了，如下图，打包前后体积还是很明显的，但是这样是不够的
为了防止文件过大，我们先把公共代码分离config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}
打包后的效果，如下图
那么，在最后就是用CDN这里就引入一个vue.js作为例子config.externals={vue:Vue}
需要在你的public/index.html的body标签中引用对应版本的vue.js
然后整体打包，ok，附上完整的vue.config.jsconstpath=requireconstCompressionWebpackPlugin=requireconstappname=indexfunctionresolve{returnpath.join}constisProduction=process.env.NODE_ENV===production//vue.config.jsmodule.exports={productionSourceMap:false,outputDir:appname+OutPutFile,//运行时生成的生产环境构建文件的目录assetsDir:appname+public,//放置生成的静态资源的目录indexPath:appname+.html,//指定生成的index.html的输出路径也可以是一个绝对路径。configureWebpack:config={if{//开启gzip压缩config.plugins.push)config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}config.performance={hints:warning,//入口起点的最大体积maxEntrypointSize:50000000,//生成文件的最大体积maxAssetSize:30000000,//只给出js文件的性能提示assetFilter:function{returnassetFilename.endsWith}}config.externals={vue:Vue}}},chainWebpack:={config.resolve.alias.set).set).set).set).set).set).set)},css:{},lintOnSave:undefined}
最后的一点建议，如果条件允许，能走cdn尽量走cdn，效果还是比较惊人的。