Vue项目优化打包之前端必备加分项

目录
  • 前言
  • 一、路由懒加载
    • 1. 为什么需要路由懒加载
    • 2. 如何实现路由懒加载
    • 3. 路由懒加载中的魔法注释
  • 二、分析包大小
    • 1. 需求
    • 2. 如何生成打包分析文件
  • 三、webpack配置排除打包
    • 1. 需求
    • 2. 排除打包
  • 四、 引用网络资源
    • 1. 需求
    • 2. CDN
    • 3. 实现步骤
  • 五、 打包去除console.log
    • 1. 需求
    • 2. 代码演示
  • 总结

前言

Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~

一、路由懒加载

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

当刚运行项目的时候，发现刚进入页面，就将所有的js文件和css文件加载了进来，这一进程十分的消耗时间。
如果打开哪个页面就对应的加载响应页面的js文件和css文件，那么页面加载速度会大大提升。

2. 如何实现路由懒加载

vue官方文档：路由懒加载

代码如下（示例）:

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

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

通过在注释中指定webpackChunkName，可以自定义这个文件的名字。

代码如下（示例）:

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")

二、分析包大小

1. 需求

想要知道打包生成的文件中，每个文件所占的空间大小。以便于我们分析，对代码进行优化处理。

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

终端中运行 npm run preview -- --report, 这个命令会从我们的入口main.js进行依赖分析，分析出各个包的大小。最终会在生成的dist文件夹下生成一个report.html的文件，打开后就可以看到我们在项目使用文件占据的空间大小啦~
(效果图如下：)

三、webpack配置排除打包

1. 需求

将一些不常用的包，排除在生成的打包文件以外。

例如：上图所示的xsxl.js 、 element.js，可以将其排除在打包生成的文件以外

2. 排除打包

找到 vue.config.js， 添加 externals 项，具体如下：

代码如下（示例）：

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      *     '包名' : '在项目中引入的名字'
      *
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

四、 引用网络资源

1. 需求

我们进行了上一步操作以后，打包生成后的包小了很多。但是呢，没有这些依赖包的话，项目上线是没有办法运行的。那么就需要引用网络中的资源，来支持我们代码的运行。

2. CDN

  • CDN全称叫做“Content Delivery Network”，中文叫内容分发网络。我们用它来提高访问速度
  • 把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。

好处：

  1. 减少应用打包出来的包体积
  2. 加快静态资源的访问
  3. 利用浏览器缓存，不会变动的文件长期缓存

3. 实现步骤

注意:在开发环境时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如下：

代码如下（示例）：

在vue.config.js文件中:

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

webpack配置externals配置项

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

通过 html-webpack-plugin注入到 index.html之中:

在vue.config.js文件中配置:

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  // 省略其他...
}

找到 public/index.html   通过配置CDN Config 依次注入 css 和 js。

修改head的内容如下:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
        <% } %>

    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>

五、 打包去除console.log

1. 需求

在项目打包上线后，去除掉代码中所有的console.log

2. 代码演示

在vue.config.js文件中配置：

代码如下（示例）：

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

总结

到此这篇关于Vue项目优化打包之前端必备加分项的文章就介绍到这了,更多相关Vue项目优化打包内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现的多页面项目如何优化打包的步骤详解

    遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化 使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自

  • Vue项目打包编译优化方案

    1. 不生成.map文件 默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件. 我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的.这里我们需要配置不生成map文件. vue-cli2 config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 f

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

  • 详解Vue打包优化之code spliting

    在http1的时代,比较常见的一种性能优化就是合并http的请求数量,通常我们会把许多js代码合并在一起,但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了.而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度,很好提升用户的体验. 核心思想 业务代码和基础库的分离 这个其实很好理解,业务代码通常更新迭代很频繁,而基础

  • Vue项目总结之webpack常规打包优化方案

    由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件 要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerP

  • vue webpack打包优化操作技巧

    临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便.   webapck 把所有的静态资源都看做是一个

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

  • 关于vue-cli 3配置打包优化要点（推荐）

    关于vue-cli 3配置打包优化要点（推荐）

    配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    目录 前言 一.路由懒加载 1. 为什么需要路由懒加载 2. 如何实现路由懒加载 3. 路由懒加载中的魔法注释 二.分析包大小 1. 需求 2. 如何生成打包分析文件 三.webpack配置排除打包 1. 需求 2. 排除打包 四. 引用网络资源 1. 需求 2. CDN 3. 实现步骤 五. 打包去除console.log 1. 需求 2. 代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优

  • Vue项目优化打包详解

    Vue项目优化打包详解

    目录 前言 一.路由懒加载 1.为什么需要路由懒加载 2.如何实现路由懒加载 3.路由懒加载中的魔法注释 二.分析包大小 1.需求 2.如何生成打包分析文件 三.webpack配置排除打包 1.需求 2.排除打包 四. 引用网络资源 1.需求 2.CDN 3. 实现步骤 五. 打包去除console.log 1.需求 2.代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    Vue项目完成后就要从开发环境转成生产环境 一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题 1.生成报告有两种方式,一种使用npm run build --report 2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui 3.点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2M之多,js/chunk-vendors.js就是一些项目依赖文件, 再右侧可以看到element-ui 和echarts 以及富文本编辑器,树状表格

  • 一次vue项目优化的实际操作记录

    一次vue项目优化的实际操作记录

    目录 前言 一.CDN引入 二.gzip压缩 三.路由懒加载,这种最简单的了就不多说了 四.打包不生成map文件 五.router上面使用props传参数,导致页面加载时间很长 总结 前言 项目前端优化是我们经常需要去做的事情,今天我们就来记录下我的实际操作. 一.CDN引入 这是一个常态化的操作了,主要是让我们通过npm下载依赖包和import引入的文件,变成线上使用,减少打包后的文件大小.比如常用的vue.ElementUI.vuex.vue-router.axios等等一些常用的 首先在i

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • Springboot项目与vue项目整合打包的实现方式

    Springboot项目与vue项目整合打包的实现方式

    我的环境 * JDK 1.8  * maven 3.6.0  * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    遇到的问题 使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的

随机推荐