vuecli打包优化,vue3打包优化

  vuecli打包优化,vue3打包优化

  本文主要为大家介绍Vue项目的优化包装,有一定的参考价值。感兴趣的朋友可以参考一下,希望能帮到你。

  

目录

  前言

  1.路由延迟加载1。为什么需要路由懒加载?

  2.如何实现路由的懒加载?

  3.路由延迟加载中的神奇注释

  二、分析包装尺寸1。要求

  2.如何生成打包的分析文件?

  第三,webpack配置不包括打包1。要求

  2.排除包装

  四。引用网络资源1。需求

  2.加拿大

  3.实施步骤

  第五,打包并删除console.log1的需求

  2.代码演示

  摘要

  

前言

  Vue项目开发之后,项目打包发布之前,必不可少的操作就是项目优化,这也是程的一份红利。跟着这篇文章的脚步来看看如何优化项目吧~

  

一、路由懒加载

  

1.为什么需要路由懒加载

  刚开始项目的时候,我发现所有的js文件和css文件一进入页面就被加载了。这个过程非常耗时。如果响应页面的js文件和css文件对应哪个页面打开就加载,那么页面加载速度会大大提高。

  

2.如何实现路由懒加载

  Vue官方文档:路由懒加载

  代码如下(示例):

  {

  路径:“/login”,

  组件:()=import(@/views/login/index ),

  隐藏:真

  },

  复制代码

  

3.路由懒加载中的魔法注释

  您可以通过在注释中指定webpackChunkName来自定义这个文件的名称。代码如下(示例):

  components=()=import(/* webpackChunkName: log in */./component/Login.vue )

  复制代码

  

二、分析包大小

  

1.需求

  了解每个文件在您要打包的文件中所占的空间。以便我们可以分析和优化代码。

  

2.如何生成打包分析文件

  在终端中运行npm运行预览-报告。这个命令将从我们的门户main.js执行依赖分析,并分析每个包的大小。最后,将在生成的dist文件夹下生成一个report.html文件。打开后可以看到我们在项目中使用的文件占用的空间~

  (效果图如下:)

  

三、webpack配置排除打包

  

1.需求

  从生成的打包文件中排除一些不常用的包。比如上图所示的xsxl.js和element.js,可以从打包生成的文件中排除。

  

2.排除打包

  找到vue.config.js并添加外部项,如下所示:

  代码如下(示例):

  configureWebpack: {

  //配置单页应用程序的页面标题

  姓名:姓名,

  外部:{

  /**

  *外部对象属性解析。

  *基本格式:

  *“包名”:“项目中引入的名称”

  *

  */

  vue: Vue ,

   element-ui: ElementUI ,

  xlsx: XLSX

  },

  解决:{

  别名:{

  @: resolve(src )

  }

  }

  }

  复制代码

  

四、 引用网络资源

  

1.需求

  经过前面的操作,打包生成的包要小很多。然而,如果没有这些依赖包,就没有办法在线运行项目。然后我们需要参考网络中的资源来支持我们代码的运行。

  

2.CDN

  CDN的全称是“内容分发网络”,中文叫内容分发网络。我们用它来加速访问。

  放一些静态资源:css,第三方CDN服务器上的js、图片、视频可以加快访问速度。

  好处:

  减少应用程序包的包体积。

  加速对静态资源的访问

  使用浏览器缓存长期缓存不可更改的文件。

  

3. 实现步骤

  注意:开发环境时,文件资源仍然可以从本地node_modules中取出,只有项目上线时,才需要使用外部资源。此时,我们可以用环境变量来区分。如下所示:

  代码如下(示例):

  在vue.config.js文件中:

  让外部={}

  设cdn={ css: [],js: [] }

  constis production=process . env . node _ env== production //确定它是否是生产环境。

  if (isProduction) {

  外部={

  /**

  *外部对象属性解析:

  *“包名”:“项目中引入的名称”

  */

  vue: Vue ,

  元素-ui :元素,

  xlsx: XLSX

  }

  cdn={

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: