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 导入的资源文件

注意：使用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 

    
    
    
    
    

    <% if(htmlWebpackPlugin.options.isProd){ %>
    
    
    
    

    
    
    <% } %>

  
  
    
    

    
  

(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