基于Vue开发的项目打包上线的优化相关的操作

1. 自动去除console输出

我们知道，我们在开发过程中，不可避免的会使用console.log()、console.error()等方式输出一些信息，供我们调试，但是当我们使用对Vue项目进行build的时候，如果项目中有console输出，则会编译不通过，我们可以根据提示手动的将这些输出删除就能解决问题，不过也可以通过一个开发依赖包来设置在编译过程中自动处理这个包是：babel-plugin-transform-remove-console，是一个运行依赖。

基于命令行安装

# 基于命令行下的安装
npm install babel-plugin-transform-remove-console --save-dev

基于图形界面安装

配置

找到项目的根目录下的babel.config.js，在其plugins配置段里增加一个配置即可：

// 无论是开发还是发布阶段，我们配置的插件都生效
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 这里就是增加的配置
    'transform-remove-console'
  ]
}

只有发布阶段才生效的配置：

const appendPlugins = []
if (process.env.NODE_ENV === 'production') {
  // 当是发布项目的时候才生效
  appendPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 使用展开运算符，设置只针对发布产品时有效的插件
    ...appendPlugins
  ]
}

配置完毕后重新build 即可

注：安装扩展后，如果您此时的项目在运行着，需要重启后才生效。

2. 查看打包报告

3. 路由懒加载

1. 安装@babel/plugin-syntax-dynamic-import 插件依赖

2. 将插件加入到babel.config.js中

   const appendPlugins = []
   if (process.env.NODE_ENV === 'production') {
     appendPlugins.push('transform-remove-console')
   }
   
   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     plugins: [
       [
         'component',
         {
           libraryName: 'element-ui',
           styleLibraryName: 'theme-chalk'
         }
       ],
       ...appendPlugins,
       // 加入插件配置
       '@babel/plugin-syntax-dynamic-import'
     ]
   }
   

3. 在路由配置文件router.js 中修改 组件的引入方法

   将原有的组件导入方法

   import User from '../components/User.vue'
   

   改成下面的方法

   // "my-group" 是分组名称，可以自行修改，可以将多个组件设置成一个分组
   const User = () => import(/* webpackChunkName: "my-group" */ '../components/User.vue')
   

官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

4. 服务器开启gzip压缩传输

各种服务器的开启方法不一样，这里以node(express) 环境做个例子

# 安装中间件
npm install compression

// 启用传输压缩中间件
const compression = require('compression');
app.use(compression());

5. 使用CDN加载部分资源

在 vue.config.js 中配置

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // 这是增加的部分
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        vue: 'Vue',
        // vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios'
      }
    }
  }
}

然后再 public/index.html 中加入对应的cdn脚本

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

5.1 element ui 使用cdn

1. 在public/index.html 中添加

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>

2. 在 vue.config.js 中增加配置：

configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        vue: 'Vue',
        // vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // 这是增加的部分
        'element-ui': 'ElementUI'
      }
    }
  }

3. 注意要把你在 src/main.js 中引入的element ui 相关部分注释掉，不然不会生效。