vue项目优化

（1）排除和解决编译打包中的警告和错误

（2）在生产环境中清除 console.log()

使用 babel-plugin-transform-remove-console 插件清除
安装开发依赖：

2020-05-05_192002.png
在 babel.config.js 文件中添加配置


// 这是项目发布阶段需要用到的babel 插件
const prodPlugins = []
// 判断编译模式，如果时在production 也就是生产模式，就向prodPlugin这个数组中添加 transform-remove-console
// 如果不是 production 就添加的一个空数组， 然后将prodPlugins 在plugins中展开
if(ProcessingInstruction.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布产品时的 插件数组
    ...prodPlugins
  ]
}

（3）生成打包报告

第一种方法：通过命令行参数的形式生成报告
// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report
第二种方式：通过可视化的ui 面板直接查看报告（推荐）
在可视化的ui 面板种，通过控制台和分析面板，可以方便的看到项目中所存在的问题。

2020-05-05_201954.png

2020-05-05_202410.png

（4）通过 vue.config.js 修改webpack 的默认配置

通过vue-cli 3.0 工具生成的项目，默认隐藏了所有webpack 的配置项，目的时为了屏蔽项目的配置过程，让程序员把重心放到具体功能和业务逻辑的实现上。

如果有要修改webpack 默认配置的需求，可在项目根目录种，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）

// 在项目根目录创建 vue.config.js文件
// 在这个文件种，应该导出一个包含了自定义配置选项的对象
modulu.exports = {
  // 选项...m
}

（5）为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式和发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

开发模式入口文件为： src/main-dev.js
发布模式入口文件为： src/main-prod.js
修改打包入口文件有两种方式，1.chainWebpack 通过链式编程的形式，来修改 webpack 配置；2. configureWebpack 通过操作对象的形式，来修改默认的webpack配置
两者具体使用差异，可以参考 https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

// 在 vue.config.js 文件中通过 chainWebpack 修改打包入口配置
// 同时在 src 目录下，将一个main.js文件，
// 复制成两个main-prod.js  和main-dev.js 两个入口文件
modulu.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })

    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

（6）通过 externals 加载外部CDN 资源

默认情况下，通过import 语法导入的第三方易拉宝，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包都不会被打包。

第一步：先将依赖包添加到 externals 节点下
同样在vue.config.js 中进行配置

modulu.exports = {
  chainWebpack: config => {
    // 发布模式 
    // 只有在发布模式下，才需要将第三方依赖包配置到 externals 节点下
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // 把使用到的第三方依赖包 添加进来，然后进行第二步
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

第二步：需要在public/index.html文件的头部，添加使用到的第三方依赖包的css样式表和js文件引用，的CDN 资源的引用

// 在 public/index.html 中 引入 CDN链接的 js文件和css文件
// 引入之前，需要在发布入口文件 main-prod.js 文件中删除 import 导入的资源文件
<link rel="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js">
//

然后在将Element-UI 也通过CDN 导入

// 在 生产打包入口文件 main-prod.js中 删除或注释掉element-ui按需加载的代码 import './plugins/element.js'
// 然后在public/index.html 文件中引入element-ui的js文件和css样式表
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.1/lib/index.js"></script>

注意：使用CDN导入资源文件时，应尽量固定版本导入，以免以后版本更新后出现不兼容

(7) 首页内容定制

第一步在 vue.config.js文件中增加如下代码

2020-05-06_000328.png

 // 在 vue.config.js 文件中
modulu.exports = {
  chainWebpack: config => {
    // 发布模式 
    // 只有在发布模式下，才需要将第三方依赖包配置到 externals 节点下
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // 把使用到的第三方依赖包 添加进来，然后进行第二步
      })
      // 定义一个isProd 变量，当它为 true 时，index.htm 中就会添加cdn 引用的资源文件
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

第二步在 public/index.html 文件中使用三目运算判断是否需要加载cdn 资源文件

// 自定制title 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.13.1/lib/index.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <% } %>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

(8) 路由懒加载

当打包构建项目时，JavaScript包会变得非常打，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更高效了。
具体需要3步：

安装 @babel/plugin-syntax-dynamic-import 包。

2020-05-06_011931.png
在 babel.config.js 配置文件中声明该插件。

2020-05-06_012313.png
在路由配置文件中将路由改为按需加载的形式，示例代码如下：
const Foo = () => import (/* webpackChunkName: "group-foo" */ './Foo.vue')
----------【webpackChunkName: "group-foo" 】给组件分组命名
具体配置参考：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

2020-05-06_011201.png