Vue项目优化打包详解

2024-10-09 16:18:44

前言

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服务器上，可以加速访问速度。

好处：

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

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项目的打包上线及优化 vue项目的打包项目托管项目的常见优化 vue项目的打包上线及优化项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包打开终端,切换到项目根目录输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件项目托管我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模
Vue项目优化打包之前端必备加分项

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

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

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

目录前言一.请求内容太大解决方案: CDN引入压缩请求资源一.http请求次数太多解决方案: 总结前言影响网页响应速度的因素有很多,例如:请求内容太大.http请求次数太多.服务器本身处理请求太久.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长.服务器请求处理太久和js脚本执行耗时过长,这两个跟代码的质量和服务器配置关系太重,需要根据具
vue实现的多页面项目如何优化打包的步骤详解

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

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

cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E
Python Django Vue 项目创建过程详解

1.创建项目打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject pyweb_dome # pyweb_dome 是django项目名称 2.创建应用 # 进入项目根目录 pyweb_dome 下 cd pyweb_dome python manage.py startapp webserver # webserver 为应用名 3.创建前端项目使用vue-cli在根目录创建一个名称叫[fron
vue-cli构建vue项目的步骤详解

构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -
基于脚手架创建Vue项目实现步骤详解

第一步准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vue --version 如果Vue版本太低,先卸载Vue低版本 npm uninstall vue-cli -g 第二步创建Vue项目 1. 打开要创建路径 2-1.vue CLI3版本输入vue create test创建名为test的项目接下来会问你一系列的问题 Please pick a
记一次vue-webpack项目优化实践详解

项目现状项目是一个数据监测平台,引入了ehcart和three.js 负责项目的数据可视化:打包后,体积高达2.1M,这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了一下各个文件所占用的比例: 整个项目文件分布大体清晰了,现在开始优化走起! 优化思路根据 wba的显示,第三方插件是大部头,包括three.js echart组件和elementUI组件. three.js优化空间不大,主要关注另外两个上面. echarts 根据我的项目需
Vue项目中打包优化的四种方法详解

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

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

目录一.相关配置情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包一.相关配置情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static