各位好，很多人还不知道vue用webpack打包了这个。下面详细解释一下。现在让我们来看看！

在许多用Vue开发的项目中，第一个屏幕加载会很慢，而且chunk-vendor.js每次都会占用几MB。那么如何通过Vue的内部配置来优化我们的Vue项目呢？

这是手头的一个项目，同样的源代码，同样的服务器，打开了禁用缓存，当前满载6.82秒。

优化后加载时间仅为2.59秒，加载提高了60%。

其实出发点很好理解，压缩js，用CDN。

因为我在这里使用的Linux服务器、我安装的pagoda和我使用的Nginx都默认打开了Gzip，所以我们可以先安装pressure-webpack-plugin。

Yarnaddpressure-webpack-plugin或者NPMinstallpressure-webpack-plugin然后，我们在vue.config.js中做如下配置

constcompressionwebpackplugin=require('pression-webpack-plugin')module.exports={productionsourcemap:false，configwebpack:config=>{if(isproduction){//打开gzip压缩config.plugins.push(newcompressionwebpackplugin({algorithm:'gzip'，Test:/。js$|。html$|。json$|。css/，threshold:10240，minratio:0.8})}}这样打包的时候就可以生成Gzip。如下图，包装前后的体积还是很明显的，而且

为了防止文件太大，我们先把常用代码分开。

config.optimization={runtimechunk:'single'，splitChunks:{chunks:'all'，maxInitialRequests:Infinity，minSize:20000，cachegroups:{vendor:{test:/[\/]node_modules[\/]/，name(module){constpackagename=module.context.match(/[\/]node_modules[\/](。*?)([\/]|$)/)[1]return`npm。${packagename.replace('@'，'')}}}打包后的效果如下图所示。

然后，最后用CDN。

这里举一个vue.js的例子。

config.external={vue:'vue'}你需要在你的public/index.html的body标签中引用vue.js的对应版本

然后整体打包，ok，附上完整的vue.config.js

　　constpath=require('path')constCompressionWebpackPlugin=require('pression-webpack-plugin')constappname='index'functionresolve(dir){returnpath.join(__dirname,dir)}constisProduction=process.env.NODE_ENV==='production'//vue.config.jsmodule.exports={productionSourceMap:false,outputDir:appname+'OutPutFile',//运行时生成的生产环境构建文件的目录(默认""dist""，构建之前会被清除)assetsDir:appname+'public',//放置生成的静态资源(s、css、img、fonts)的(相对于outputDir的)目录(默认"")indexPath:appname+'.html',//指定生成的index.html的输出路径(相对于outputDir)也可以是一个绝对路径。configureWebpack:config=>{if(isProduction){//开启gzip压缩config.plugins.push(newCompressionWebpackPlugin({algorithm:'gzip',test:/.js$|.html$|.json$|.css/,threshold:10240,minRatio:0.8}))config.optimization={runtimeChunk:'single',splitChunks:{chunks:'all',maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/[\/]node_modules[\/]/,name(module){constpackageName=module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1]return`npm.${packageName.replace('@','')}`}}}}}config.performance={hints:'warning',//入口起点的最大体积maxEntrypointSize:50000000,//生成文件的最大体积maxAssetSize:30000000,//只给出js文件的性能提示assetFilter:function(assetFilename){returnassetFilename.endsWith('.js')}}config.externals={vue:'Vue'}}},chainWebpack:(config)=>{config.resolve.alias.set('@$',resolve('src')).set('@api',resolve('src/api')).set('@assets',resolve('src/assets')).set('@p',resolve('src/ponents')).set('@views',resolve('src/views')).set('@layout',resolve('src/layout')).set('@static',resolve('src/static'))},css:{},lintOnSave:undefined}最后的一点建议，如果条件允许，能走cdn尽量走cdn，效果还是比较惊人的。constpath=require('path')constcompressionwebpackplugin=require('pression-webpack-plugin')constappname='index'functionresolve(dir){returnpath.join(__dirname，dir)}constisproduction=process.ENV.node_ENV=='production'//vue.config.jsmodule.exports={productionsourcemap:false，Outputdir:appname+'outputfile'，//运行时生成的生产环境构建文件的目录(默认为""dist""，该目录将在构建之前清除)asse“html”。//指定生成的index.html的输出路径(相对于outputDir)也可以是绝对路径。configurewebpack:config=>{if(isproduction){//打开gzip压缩config.plugins.push(新压缩webpackplugin({algorithm:'gzip'，test:/。js$|。html$|。json$|。css/，threshold:10240，minratio:0.8}))config.optimization={runtimechunk:'single'，splitChunks:{chunks:'all'，maxInitialRequests:Infinity，minSize:20000，cachegroups:{vendor:{test:/[\/]node_modules[\/]/，name(module){constpackagename=module.context.match(/[\/]node_modules[\/](。*?)([\/]|$)/)[1]return`npm。${packageName.replace('@'，'')}`}}}}}config.performance={hints:'warning'，//入口起点最大体积maxentrypointsize:5000000，//生成文件最大体积maxAssetSize:30000000，//只给出性能提示assetfilter:function(assetfilename){returnassetfilename.endswith('。js')}}config.external={vue:'vue'}}，chainwebpack:(config)=>{config.resolve.alias。set('@$')，resolve('src')。set('@api'，resolve('src/api'))。set('@assets'，resolve('src/assets'))。set('@p'，resolve('src/pondents'))。set('@views'，resolve('src/views'))。set('@layout'，resolve('src/layout'))。set('@static'，Resolve('src/static')}}，CSS:{}，Lintonsave:undefined}最后一个建议，有条件的话可以尽量走cdn，效果还是比较惊人的。

以上解释了vue对webpack打包的使用。这篇文章已经分享到这里了。希望能帮到大家。如果有任何错误，请联系边肖进行更正。