一、打包发布

1、打开 package.json 配置文件，为 scripts 节点下的 build 命令添加 --report 参数：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  }
}

2、重新运行打包命令:

npm run build

3、打包完成后，发现在 dist 目录下多了一个名为 report.html 的文件。在浏览器中打开此文件，会看到详细的打包报告

二、基于 externals 配置 CDN 加速

1、未配置 externals 之前：

• 凡是 import 导入的第三方模块，在最终打包完成后，会被合并到 chunk-vendors.js 中
• 缺点：导致单个文件的体积过大

2、配置了 externals 之后：

• webpack 在进行打包时，会把 externals 节点下声明的第三方包排除在外
• 因此最终打包生成的 js 文件中，不会包含 externals 节点下的包
• 好处：优化了打包后项目的体积

三、初步配置 externals 节点

1、在项目根目录下创建 vue.config.js 配置文件，在里面新增 configureWebpack 节点如下：

module.exports = {
  // 省略其它代码...
  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化
    externals: {
      // import导包的包名: window全局的成员名称
       vue: 'Vue',
      'element-ui': 'ELEMENT',     
    }
  }
}

2、在 /public/index.html 文件，新增如下的资源引用：

引入包:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">

3、在 main.js 中注释掉 element-ui 的样式

// 导入 element-ui 组件库的样式
// import 'element-ui/lib/theme-chalk/index.css'

四、配置路由懒加载

• 什么是路由懒加载：仅在需要的时候，加载路由对应的组件页面
• 好处：可以提高 index.html 首页的打开速度
• 配置路由懒加载的核心步骤: 1、 运行如下的命令，安装 babel 插件：

npm install --save-dev @babel/plugin-syntax-dynamic-import

2、修改项目根目录下的 babel.config.js 配置文件，新增 plugins 节点：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 实现路由组件按需导入的 babel 插件
+ plugins: ['@babel/plugin-syntax-dynamic-import']
}

3、在 /src/router/index.js 模块中，基于 const 组件 = () => import('组件的存放路径') 语法，改造每个路由组件的导入方式。例如：

// 导入 Reg 组件
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import('@/views/Reg/Reg.vue')

// 导入 Login 组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')