前言Vue项目开发完成后，在项目打包发布之前，必不可少的操作就是项目优化，这也是程序员的加分项。按照这篇文章的步骤，看看如何优化项目吧~1.懒加载为什么需要懒路由？这个过程非常耗时。如果打开哪个页面，对应加载相应页面的js文件和css文件，那么页面加载速度会大大提高。如何实现路由的懒加载Vue官方文档：懒路由代码如下（示例）：{path:'/login',component:()=>import('@/views/login/index'),hidden:true},路由懒加载中的神奇注释可以通过在注释中指定webpackChunkName来自定义这个文件的名称。代码如下（示例）：components=()=>import(/*webpackChunkName:"login"*/"../component/Login.vue")复制代码2.分析包大小需求想知道的打包生成的文件，每个文件占用的空间大小。为了方便我们分析和优化代码。如何生成包分析文件在终端运行npmrunpreview----report，这个命令会从我们的入口main.js开始进行依赖分析，分析每个包的大小。最后会在生成的dist文件夹下生成一个report.html文件。打开后可以看到我们在项目中使用的文件所占用的空间。生成的包文件中排除了常用的包。例如：打包生成的文件中可以排除上图中的xsxl.js和element.js。找到vue.config.js，添加externals项，如下：代码如下（示例）：configureWebpack:{//配置单页应用页面的标题name:name,externals:{/***外部对象属性的解析。*基本格式：*'包名':'项目中引入的名称'**/'vue':'Vue','element-ui':'ElementUI','xlsx':'XLSX'},resolve:{alias:{'@':resolve('src')}}}复制代码4.引用网络资源的要求我们执行了上一步之后，生成的包就小了很多。但是，如果没有这些依赖包，项目上线就没有办法运行。那么我们就需要参考网络中的资源来支持我们代码的运行。CDNCDN的全称是“ContentDeliveryNetwork”，中文叫做ContentDeliveryNetwork。我们用它来提高访问速度，把一些静态资源：css、.js、图片、视频放在第三方CDN服务器上，可以加快访问速度。好处：减少应用打包后的包大小，加快静态资源的访问速度使用浏览器缓存实现文件的长期缓存，不会改变注意：在开发环境中，文件资源仍然可以从本地的node_modules，只有项目上线的时候，才需要使用外部资源。此时我们可以使用环境变量来区分。具体如下：代码如下（示例）：vue.config.js文件中：letexternals={}letcdn={css:[],js:[]}constisProduction=process.env。NODE_ENV==='production'//判断是否为生产环境if(isProduction){externals={/***externals对象属性分析:*'packagename':'项目中引入的名称'*/'vue':'Vue','element-ui':'ELEMENT','xlsx':'XLSX'}cdn={css:['https://unpkg.com/element-ui/lib/theme-chalk/index.css'//element-uicssstylesheet],js:[//vue必须先！'https://unpkg.com/vue@2.6.12/dist/vue.js',//vuejs'https://unpkg.com/element-ui/lib/index.js',//element-uijs'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',//xlsx]}}复制代码webpack配置externals配置项configureWebpack:{//配置单页应用页面的titlename:name,externals:externals,resolve:{alias:{'@':resolve('src')}}}复制代码，通过html注入index.html-webpack-plugin:在vue.config.js文件中配置：chainWebpack(config){config.plugin('preload').tap(()=&g吨;[{rel:'preload',fileBlacklist:[/\.map$/,/hot-update\.js$/,/runtime\..*\.js$/],include:'initial'}])//注入cdn变量（打包时执行）config.plugin('html').tap(args=>{args[0].cdn=cdn//为插件配置cdnreturnargs})//省略其他。..}复制代码找到public/index.html通过配置CDNConfig依次注入css和js修改head内容如下：
