vue项目优化

   在我们前端项目上线时，通常都需要减小项目体积以提高项目的线上运行速度。

可以通过以下几种方式对项目的体积进行有效的优化。

1.移除输出语句

    开发阶段使用的输出语句(console) 在项目上线的时候是不需要的，可能调试语句不是很多，但是为了追求完美和极致的运行流畅度，我们还是要移除他们。

目前有两种方式，他们的使用方式及原理如下：

    1.babel语法编译器想必大家都不陌生，他可以将代码中Es高版本的语法转换为兼容性更好的低版本语法。

而babel的一个插件可以让代码在语法转换时删除输出语句，插件的安装及配置如下：

安装：（生产依赖）

npm i babel-plugin-transform-remove-console -d

配置：在项目根目录下的 babel.config 文件中加入配置

// 加入配置[转换时删除console语句]
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]  
}

    2.webpack打包工具同样有删除console语句的插件

安装：（生产依赖）

npm i terser-webpack-plugin -d

配置：项目根目录下新建webpack配置文件 webpack.config.js 并写入配置

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

以上两种方法都可以实现在线上生产环境删除输出语句，以提高运行速度。

2.将本地改为CDN引用

打包之前，将入口文件中使用的各种框架或模块的本地地址全部删除，再将他们的线上CDN地址引入出口文件。

在vue配置文件在 vue.config.js 中添加如下配置：

// 声明生产环境依赖
config.set('externals',{
    Vue: 'vue',
    axios: 'axios',
    .....                // 将使用线上地址的模块地址在此声明
})

3.路由懒加载

    原理：将所有代码分成几块，按照路由跳转加载需要的代码块，同样地减少不必要的服务器请求，即按需加载。

    1.安装路由懒加载插件

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

    2.配置

         在 babel 的配置文件中加入配置 "@bable/plugin-syntax-dynamic-import"

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    ...prodPlugins,
    "@bable/plugin-syntax-dynamic-import"    // 使用插件
  ]
}

    3.修改路由文件

        将路由改为如下格式

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "group-common" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/Welcome.vue')

  再次编译打包即可