vue 打包优化以及项目打包本地预览

优化策略

第一：安装插件babel-plugin-transform-remove-console： 自动清除console.log()

修改 babel.config.js 文件

let transformRemoveConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  transformRemoveConsolePlugin = ['transform-remove-console']
}
module.exports = {
  plugins: [
    ...transformRemoveConsolePlugin
  ]
}

第二：区分生产环境和测试环境打包入口main.js

为啥要区分生产环境和测试环打包入口呢
因为打包生产环境的时候element-ui还是打包了，体积还是很大，只能把它注释掉。注释掉后，测试环境就会报element-ui未引入错误，所以区分了。
不知道有啥办法，欢迎留言，解决办法。

测试环境main.js

import Vue from 'vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import App from './App.vue'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

生产环境main-prod.js

/* eslint-disable */
// import Vue from 'vue'
import router from './router'
import store from './store'
// import ElementUI from 'element-ui'
import App from './App.vue'

// Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第三：配置vue.config.js

const isProduction = process.env.NODE_ENV === 'production'; //判断是否生产环境
const isDvelopment = process.env.NODE_ENV === 'development'; //判断是否生产环境
//cdn 引入
const cdn = {
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.4.3/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js',
    'https://unpkg.com/element-ui@2.13.2/lib/index.js',
    'https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js',
  ]
}
let isCssExtract = true
if (isProduction) { isCssExtract = false } 
if (isDvelopment) { isCssExtract = true } 
module.exports = {
  //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  runtimeCompiler: true,
  // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
  productionSourceMap: true,
  /**
   * 生产环境下是 true，开发环境下是 false
   * extract:是否将组件中的 CSS 提取至一个独立的 CSS 文件中
   * */ 
  css: {
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
  },
  
  chainWebpack: config => {
    if (isProduction) {
      config.entry('app').clear().add('./src/main-prod.js') //生产环境打包入口
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }
    if(isDvelopment) {
      config.entry('app').clear().add('./src/main.js') //生产环境打包入口
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      /**忽略打包的第三方库
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
      * 为啥element-ui的是ELEMENT
      * 因为elementUI外部库对外暴露的全局变量是'ELEMENT'，必须填写外部库对外暴露的全局变量名
      */
      config.externals = {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        'element-ui': 'ELEMENT'
      }
    }
  }
}

第四、路由懒加载
官方推荐：component: () => import(’@/views/Welcome.vue’)

eslint小技巧
/* eslint-disable */ 放置于文件最顶部，整个文件范围内禁止规则出现警告
// eslint-disable-line 表示针对某一行禁用eslint检查
vue.config.js相关配置

如何预览打包文件
第一，全局npm install -g live-server
第二，打开打包好的目录dist，输入cmd