》关注前端开发社区，回复“1”加入前端技术交流群，回复“2”免费领取500G前端干货！最近优化了一个vuecli3.0项目，项目打包体积从2.5M优化到272k，速度提升了2/3左右。写下优化方法下图：需要新建一个文件'vue.config.js'，（这个文件名是这样固定的），和package.json在同一个目录下。BundleAnalyzer的作用：显示打包好的图形信息，它会打开一个html页面帮你分析哪些文件过大，可以优化，注释掉安装webpack-bundle-analyzer插件npminstallwebpack-bundle-analyzer--savebeforeonline-devinvue.config.js://引入constBundleAnalyzerPlugin=require("webpack-bundle-analyzer").BundleAnalyzerPlugin;//显示图形信息chainWebpack:config=>{config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin)}提取css支持按需加载安装mini-css-extract-plugin插件npminstallmini-css-extract-plugin-Dinvue.config.js:chainWebpack:config=>{letminiCssExtractPlugin=newMiniCssExtractPlugin({filename:'assets/[name].[hash:8].css',chunkFilename:'assets/[name].[hash:8].css'})config.plugin('extract-css').use(miniCssExtractPlugin)}按需加载图片安装image-webpack-loader插件npminstallimavue.config.js中的ge-webpack-loader-D:config.module.rule('images')。测试(/\.(png|jpe?g|gif|webp)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({旁路ebug:true}).end()图片压缩可以批量进行，地址：https://tinypng.com/gzipcompressioncodeinstallcompression-webpack-pluginpluginnpminstallcompression-webpack-plugin-Dinvue.config。js里面：constCompressionWebpackPlugin=require('compression-webpack-plugin');//启用gzip压缩config.plugins.push(newCompressionWebpackPlugin({filename:info=>{return`${info.path}.gz${info.query}`},algorithm:'gzip',threshold:10240,//只有大于这个值的资源才会被处理10240test:newRegExp('\\.('+['js'].join('|')+')$'),minRatio:0.8,//只处理压缩??率小于该值的资源deleteOriginalAssets:false//删除原文件}))vue.config中提取公共代码。js://启用gzip压缩configureWebpack:config=>{config.plugins.push(newCompressionWebpackPlugin({filename:info=>{return`${info.path}.gz${info.query}`},algorithm:'gzip'，阈值：10240，//只有大于这个值的资源才会被处理10240test:newRegExp('\\.('+['js'].join('|')+')$'),minRatio:0.8,//只有压缩率小于这个值的资源才会被处理deleteOriginalAssets:false//删除原文件}))}element-ui按需加载安装babel-plugin-component插件npminstallbabel-plugin-component--save-devinbabel.config.js:module.exports={presets:['@vue/app'],plugins:[["component",{libraryName:"element-ui",styleLibraryName:"theme-chalk"}]]}echarts按需加载：安装babel-plugin-equire插件：npminstallbabel-plugin-equire-D在项目中创建echarts.js//eslint-disable-next-lineconstecharts=require([//编写你需要的echartsapi"tooltip","line"]);导出默认echarts；在babel.config里面.js:module.exports={presets:['@vue/app'],plugins:[["component",{libraryName:"element-ui",styleLibraryName:"theme-chalk"}],"equire"]}具体页面应用：//直接引用importechartsfrom'@/lib/util/echarts.js'this.myChart=echarts.init(this.$refs.chart)lodash按需加载：在babel.config.js中安装lodash-webpack-plugin插件npminstalllodash-webpack-plugin--save-dev:module.exports={presets:['@vue/app'],plugins:[["component",{libraryName:"element-ui",styleLibraryName:"theme-chalk"}],"lodash","equire"]}在vue.config.js中：constLodashModuleReplacementPlugin=require("lodash-webpack-plugin");chainWebpack:config=>{config.plugin("loadshReplace").use(newLodashModuleReplacementPlugin());}prefetch和preload删除无用的插件，避免加载冗余资源（如果不删除的话，无用的js文件会加载到index.html)chainWebpack:config=>{//去掉prefetch插件，避免加载冗余资源config.plugins.delete('prefetch')/去掉preload插件，避免加载冗余资源config.plugins.delete('preload');}完整代码：constMiniCssExtractPlugin=require('mini-css-extract-plugin');constCompressionWebpackPlugin=require('compression-webpack-plugin');constLodashModuleReplacementPlugin=require("lodash-webpack-plugin");module.exports={productionSourceMap:false,//关闭生产环境的sourcemaplintOnSave:false,publicPath:process.env.VUE_APP_PUBLIC_PATH,devServer:{host:"localhost",port:3002,proxy:{'/api':{target:"https://tapi.quanziapp.com/api/",ws:true,changeOrigin:true,pathRewrite:{'^/api':''}},}},chainWebpack:config=>{//移除预取插件config.plugins.delete('prefetch');//移除预加载插件以避免加载冗余资源config.plugins.delete('preload');config.optimization.minimize(true);config.optimization.splitChunks({chunks:'all'})config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)if(process.env.NODE_ENV!=='development'){letminiCssExtractPlugin=newMiniCssExtractPlugin({filename:'assets/[name].[hash:8].css',chunkFilename:'assets/[name].[hash:8].css'})config.plugin('extract-css').use(miniCssExtractPlugin)config.plugin("loadshReplace").use(newLodashModuleReplacementPlugin());config.module.rule('images').test(/\.(png|jpe?g|gif|webp)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug:true}).end().use('url-loader').loader('file-loader').options({name:'assets/[name].[hash:8].[ext]'}).end()config.module.rule('svg').test(/\.(svg)(\?.*)?$/).use('file-loader').loader('file-loader').options({name:'assets/[name].[hash:8].[ext]'})}},configureWebpack:config=>{//config.plugins.push(["equire"]);if(process.env.NODE_ENV!=='development'){config.output.filename='assets/[name].[hash:8].js'config.output.chunkFilename='assets/[name].[散列：8].js'}//公共代码提取config.optimization={//拆分代码块splitChunks:{cacheGroups:{//公共模块提取common:{chunks:'initial',minSize:0,//大于0的单词SectionminChunks:2,//抽取公共代码时，此代码块最少被引用次数},//第三方库抽取vendor:{priority:1,//weighttest:/node_modules/,chunks:'initial',minSize:0,//大于0字节minChunks:2,//这个代码块在拆分前应该被引用的最少次数},},}}//启用gzip压缩config.plugins.push(newCompressionWebpackPlugin({filename:info=>{return`${info.path}.gz${info.query}`},algorithm:'gzip',threshold:10240,//只有大于这个值的资源才会被处理10240test:newRegExp('\\.('+['js'].join('|')+')$'),minRatio:0.8,//只有压缩比小于这个值的资源才会被处理deleteOriginalAssets:false//删除或初始文件}))},css:{extract:true,sourceMap:false,loaderOptions:{sass:{},},},}近期：vue3.0新特性初体验（二）请支持帅编，回复“1”加入前端技术交流群里回复“2”领取500G前端干货
