文章
27
标签
65
分类
19
首页
时间轴
留言
友链
好物推荐
每日红包
海龟汤
关于
目录
  1. 1. 前言
  2. 2. 生成打包报告
    1. 2.1. 命令行生成报告
    2. 2.2. vue ui 图形化界面生成报告
  3. 3. 优化一：配置分离
    1. 3.1. 分离配置
    2. 3.2. 定义不同的入口文件
    3. 3.3. html 模版引入 CDN
  4. 4. 优化二：路由懒加载
  5. 5. 结果
Vue 项目打包优化 - CDN、配置分离、路由懒加载
|前端Vue
字数总计: 1.6k|阅读时长: 7 分钟|阅读量:

前言

Vue 项目打包优化 - CDN、配置分离、路由懒加载。

本例项目是之前写的一个后台管理系统，项目使用的库版本：

  • vue-cli: @3.11.0
  • vue: @2.6.10
  • vue-router: @3.1.3

另外本项目还用到了 axios、echarts、element-ui、nprogress、vue-quill-editor等，不优化直接打包会非常大。优化目的：

  1. 配置分离：开发模式使用本地资源，生产模式打包资源使用 CDN 引入。
  2. 路由懒加载：js 包过大会影响页面加载速度，路由被访问才加载对应组件更加高效。

生成打包报告

有两种方式：

  1. 命令行生成打包报告（build 命令后加 --report）
  2. 利用 vue ui 工具（推荐，非常直观）

命令行生成报告

1
2
3
4
npmx vue-cli-service build --report

#或者在 package.json 的 build 命令后添加 --report，然后再
npm run build

此方法会自动在 dist 目录下生成 report.html，打开如下：

report.html

vue ui 图形化界面生成报告

vue-cli3 中自带了 vue ui 图形化界面，用于创建和管理项目。

1
2
# 启动 Vue UI
vue ui

【导入项目】-【任务】-【build】- 【运行】，效果如下：

vue ui 图形化界面

优化一：配置分离

从打包报告中可以看出，依赖项大小还是挺大的，如 element-ui、echarts等，我们可以通过配置分离，在生产模式打包时不要打包这些依赖以及一些 CSS 本地资源，在 html 模版中引入依赖的 CDN 资源。

需要了解的知识有：

分离配置

vue-cli3 中需要添加 vue.config.js 配置文件。

  1. 给不同模式定义不同的入口文件
  2. 需要 CDN 引入的依赖添加到 externals 中
  3. 给 htmlWebpackPlugin 添加一个参数变量来控制 html 模版生成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 生产模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      // 生产模式加载 main-prod 入口文件
      config.entry('app').clear().add('./src/main-prod.js')
      // CDN - externals
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      // 首页自定义，添加一个变量来控制html模版，是否加载cdn资源。
      config.plugin('html').tap((args) => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', (config) => {
      // 开发模式加载 main-dev 入口文件
      config.entry('app').clear().add('./src/main-dev.js')
      // 首页自定义
      config.plugin('html').tap((args) => {
        args[0].isProd = false
        return args
      })
    })
  }
}

注：vue-cli 中 html 模版是由 html-webpack-plugin 处理的，所以可以通过给插件属性添加一个变量，并且 html 模版可以通过插值的方式，根据变量来决定是否输出 CDN 资源。


定义不同的入口文件

原入口文件 main.js 复制两份分别命名 main-dev.js、main-prod.js。
在 main-prod.js 注释或删除 CDN 引入的 CSS。

1
2
3
4
5
6
7
8
9
10
// 生产模式入口文件 main-prod.js

// css - 生产模式cdn引入
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// import 'nprogress/nprogress.css'

// elementUI 按需引入，生产模式 cdn 引入
// import './plugins/element.js'

html 模版引入 CDN

public/index.html 引入 external 忽略的依赖和入口文件删除的 CSS 对应的 CDN 链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'DEV - ' %>后台管理系统</title>
<!-- 生产模式才加载 CDN -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!-- nprogress进度条 css -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- vue-quill-editor富文本编辑器 css -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css" />
<!-- elementUI css -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
<!-- js -->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.13/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="https://unpkg.zhimg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
<% } %>

如上设置模版，即可通过变量 isProd 在不同模式下是否加载 CDN 资源，以及不同模式下有不同的 title。

优化二：路由懒加载

如上操作后可以一定程度减少打包大小，但此时所有组件仍会被打包到同一个 chunk-vendors.js 中，如果组件过多打包数据仍然会很大，从而影响首屏加载时间。

路由懒加载可以将代码分割打包，且仅当路由被访问时才加载对应组件。

最简单方法：

1
2
// import Login from '../views/Login.vue'
const Login = () => import('../views/Login.vue')

以上方式有个缺点，会将每个路由组件单独打包。可以通过魔法注释将部分组件打包在同个 chunk 中，相同 chunkName 为一个包。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// src/router/index.js

// import Login from '../views/Login.vue'
// import Home from '../views/Home.vue'
// import Welcome from '../components/home/Welcome.vue'
// import Users from '../components/users/Users.vue'
// import RightsList from '../components/rights/RightsList.vue'
// import RolesList from '../components/rights/RolesList.vue'
// import GoodsCategories from '../components/goods/GoodsCategories.vue'
// import GoodsList from '../components/goods/GoodsList.vue'
// import CategoriesParams from '../components/goods/CategoriesParams.vue'
// import AddGoods from '../components/goods/AddGoods.vue'
// import OrdersList from '../components/orders/OrdersList.vue'
// import StatisticsReports from '../components/statistics/StatisticsReports.vue'

// 路由懒加载
const Login = () => import(/* webpackChunkName: "Index" */ '../views/Login.vue')
const Home = () => import(/* webpackChunkName: "Index" */ '../views/Home.vue')
const Welcome = () => import(/* webpackChunkName: "Index" */ '../components/home/Welcome.vue')

const Users = () => import(/* webpackChunkName: "Users" */ '../components/users/Users.vue')

const RightsList = () => import(/* webpackChunkName: "Rights" */ '../components/rights/RightsList.vue')
const RolesList = () => import(/* webpackChunkName: "Rights" */ '../components/rights/RolesList.vue')

const GoodsCategories = () => import(/* webpackChunkName: "Goods" */ '../components/goods/GoodsCategories.vue')
const GoodsList = () => import(/* webpackChunkName: "Goods" */ '../components/goods/GoodsList.vue')
const CategoriesParams = () => import(/* webpackChunkName: "Goods" */ '../components/goods/CategoriesParams.vue')
const AddGoods = () => import(/* webpackChunkName: "Goods" */ '../components/goods/AddGoods.vue')

const OrdersList = () => import(/* webpackChunkName: "Orders" */ '../components/orders/OrdersList.vue')

const StatisticsReports = () =>
  import(/* webpackChunkName: "Statistics" */ '../components/statistics/StatisticsReports.vue')

结果

此时重新打包生成报告：

优化打包

另外：如果服务器开启 Gzip，在 vue.config.js 配置中使用 Gzip 压缩，能得到更好的压缩效果，如何开启这里就不赘述了，自行 Google 吧。

参考文档：

文章作者: Vincent F0ng
文章链接: https://vincef0ng.cn/post/vue-project-optimization/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Vincent F0ng！
前端 Vue Webpack Vue-cli3 CDN Vue-router 路由懒加载 配置分离
请喝奶茶
  • 微信
  • 支付宝
 领红包
相关推荐
前端路由 vue-router 使用总结 - 前端随笔
BeforeAfterSlider 一个轻量级实现图片Before/After效果的JS插件
Webpack 4 + Babel 7 打造 ES6+ 前端环境
评论（支持Markdown）
繁