更多内容请收藏我的博客：http://blog.tianzhen.tech简介vue-cli是一个非常好用的Vue项目脚手架生成工具，当一个项目从开发环境上线的时候说到生产环境，我们经常会遇到一些问题：为什么打包后的文件大小是2Mb？为什么页面上的资源加载很慢？为什么将不相关的代码片段捆绑到同一个文件中？本文主要针对vue-cli生成的项目，在打包过程中做了一些优化。本文发布时vue-cli版本为v4。如果不需要额外配置按需加载路由，当项目首页打开时，项目会同时加载很多与当前页面不相关的代码，影响我们首页的加载速度页。按需加载的路由（懒加载）可以解决这个问题。我们让webpack自动识别并将不同的路由组件打包到单独的文件中。得益于vue-cli的封装，我们只需要这样写路由就可以实现按需路由：constroutes=[{path:'',redirect:'/home',},{path:'/home',name:'home',component:()=>import('@/views/home'),meta:{title:'Home'}}{path:'/about',name:'about',组件:()=>import('@/views/about'),meta:{title:'About'}},]异步组件异步组件的原理和按需加载路由类似，我们也只需要具体写代码：exportdefault{name:'MyPage',components:{test:()=>import('./test')//异步导入组件，让webpack拆分打包代码},}的分析工具要解决打包文件过大的问题，首先要分析是什么原因导致文件过大，哪里可以减小打包文件的大小。webpack-bundle-analyzer插件内置在vue-cli中。我们默认修改package.json中的打包命令为npmrunbuild--report查看可视化打包分析：{"scripts":{"build":"vue-cli-servicebuild--report",},}$npmrunbuild执行命令后，会在dist目录下多生成一个report.html文件，在浏览器中打开，可以看到分析：从图中可以看出，时刻库占用了一个很多无用的空间。使用此工具，我们可以分析哪些文件正在占用空间。按需打包Moment.jsmoment.js占用空间大的原因是moment里面包含了很多我们不需要的语言资源文件。这些无用的内容在打包时可以通过webpack自带的函数丢弃：//在项目根目录新建一个vue.config.jsconstwebpack=require('webpack')module.exports={configureWebpack:config=>{constplugins=[//只保留中文语言资源newwebpack.ContextReplacementPlugin(/moment[/\\]locale$/,/zh-cn/),]},}按需打包lodashLodash也是前端常用的工具库端，并且有两种解决方案可以减小其封装尺寸。首先我们这样写代码，然后选择以下任意一种方式完成优化：import{cloneDeep}from'lodash'consta={k:'v'}constb=cloneDeep(a)使用lodash-es（推荐）如果你使用es模块，那么你可以直接安装lodash-es：$npmilodash-eslodash-webpack-pluginplugin也可以使用lodash-webpack-plugin插件自动删除不用的lodash代码：注意：这个插件在使用find等方法时可能会删除一些必须的依赖，导致程序报错。解决方法是自己完成依赖，或者使用lodash-es//vue.config.jsconstLodashWebpackPlugin=require('lodash-webpack-plugin')module.exports={configureWebpack:config=>{constplugins=[//添加这个新的LodashWebpackPlugin(),]},}压缩代码新版本的vue-cli会自动压缩代码，所以不需要额外的配置。如果使用老版本的cli生成项目，可以查询terser相关的用法。uglifyify.js已经停止维护了，不要用这个库来生成gzip文件nginx可以帮我们自动将资源压缩成gzip文件，如果打包的时候能提供一个压缩的gzip文件，传输会更快。这里使用了compression-webpack-plugin插件：$npmi-Dcompression-webpack-plugin编辑webpack配置：//vue.config.jsconstCompressionWebpackPlugin=require('compression-webpack-plugin')constproductionGzipExtensions=['js','css']module.exports={configureWebpack:config=>{constplugins=[newCompressionWebpackPlugin({filename:'[path].gz[query]',algorithm:'gzip',test:newRegExp('\\.('+productionGzipExtensions.join('|')+')$'),threshold:10240,minRatio:0.8}),]//只在生产环境压缩，提高开发时的编译速度if(process.env.NODE_ENV==='production'){config.plugins=[...plugins,...config.plugins]config.optimization={splitChunks:{cacheGroups:{//提取公共模块commons:{chunks:'all',minChunks:2,maxInitialRequests:5,minSize:0,name:'common'}}},}}},}注：gzip也需要服务器支持，一般配置在nginx上
