一、移除console 策略

在企业内部：
在dev开发环境中需要有console，为了方便开发人员测试。
在发布环境中，却不能出现console调用的方法。

1. 命令

1.1. 插件官网：

https://www.npmjs.com/package/babel-plugin-transform-remove-console

1.2. 安装babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save-dev

1.3. 在babel.config.js或者.babelrc文件中配置

配置参数：

{"plugins": ["transform-remove-console"]
}

企业内部完整配置(推荐使用)：
由于这个文件属于全局的配置文件，因此，这里对打包环境做了判断，此配置只在发布或者上线环境中启动

// 项目发布阶段用到的插件
const prodPlugins = []
if (process.env.NODE_ENV === 'productio') {prodPlugins.push('transform-remove-console')
}module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],// 发布产品用到的插件数组...prodPlugins,]
}

官网截图：

2. 图形化(推荐使用)

2.1. 在线图形化安装插件

【依赖】-【添加依赖】-【开发依赖】搜索【babel-plugin-transform-remove-console】-【安装】

2.2. 在babel.config.js或者.babelrc文件中配置

企业内部完整配置(推荐使用)：
由于这个文件属于全局的配置文件，因此，这里对打包环境做了判断，此配置只在发布或者上线环境中启动

// 项目发布阶段用到的插件
const prodPlugins = []
if (process.env.NODE_ENV === 'productio') {prodPlugins.push('transform-remove-console')
}module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],// 发布产品用到的插件数组...prodPlugins,]
}

二、生成打包报告

打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告，通过报告分析项目中存在的问题。

1. 通过命令参数的形式生成报告

1.1. 插件安装

#通过vue-cli的命令选项可以生成打包报告
#--report选项可以生成report.html 以此来帮助分析打包内容
vue-cli-service build --report

1.2. 分析生成的report.html

2. 可视化UI面板直接查看报告(推荐使用)

在可视化的UI面板中，通过控制台和分析面板，可以方便的清晰直观多角度看到项目中存在的问题。

2.1. 启动ui界面

vue ui

2.2. ui界面总览

三、打包配置个性化

1. webpack配置项简述

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

若有需要修改webpack默认配置需求，可以再项目目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程中作者自定义的配置(具体配置参考：https://cli.vuejs.org/zh/config/#vue_config.js)

// vue.config.js
//在这个配置文件中，自定义配置选项的对象
module.exports = {
//选项
}

2. 为开发环境和发布环境指定不同打包入口

默认情况下，Vue项目的开发模式与发布模式，公用一个打包的入口文件(即src/main.js)，为了将项目的开发过程分离，我们可以分为2种模式，为开发环境和发布环境指定不同的入口文件。

2.1. 开发环境入口文件src/main-dev.js

2.2. 开发环境入口文件src/main-prod.js

2.3. 自定义webpack打包配置

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。

configure和chainWebpack的作用相同，唯一的区别就是他们修改了webpack配置的方式：
①chainWebpack通过链式编程的形式，来修改默认的webpack配置
②configureWebpack通过操作对象的形式来修改默认webpack配置

二者具体差异：https://cli.vuejs.org/zh/guide/webpack.html#

2.4. 通过chainwebpack自定义打包入口

module.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 === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')})}
}

四、资源加载优化

通过externals加载外部的CDN资源

1. 具体参考配置

config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',lodash: '_',echarts: 'echarts',nprogress: 'NProgress','vue-quill-editor': 'VueQuillEditor'})

2. 指定CDN引用

同事需要在public/index.html的文件头部，添加CDN资源引用

  <!-- nprogress 进度条的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /><!-- 富文本编辑器 的样式表文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.bubble.min.css" /><script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script><script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本编辑器的 js 文件 --><script src="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

3. 通过CDN优化ElementUI的打包

虽然在开发阶段，我们启用了element ui组件的按需加载，尽可能的减少打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element-ui中的组件，也通过CDN的形式来加载，这样可以进一步减少打包后的文件体积。

3.1. 操作流程

具体操作如下：
①在main-prod.js中，注释掉eleemnt-ui按需加载的代码
②在index.html的头部区域中，通过CDN来加载element-ui的js和css样式

  <!-- element-ui 的样式表文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" />
<!-- element-ui 的 js 文件 --><script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>

五、首页内容定制

不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定制。

1. 插件配置1

module.exports = {chainWebpack: config => {// 发布模式config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')// 配置插件config.plugin('html').tap(args => {args[0].isProd = truereturn args})})// 开发模式config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')// 配置插件config.plugin('html').tap(args => {args[0].isProd = falsereturn args})})}
}

2. 插件配置2

在public/index.html的首页中，可以根据isProd的值，来决定如何渲染页面结构

 <!-- 按需渲染的页面标题 --><title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title><!-- 按需加载外部的CDN资源 --><% if(htmlWebpackPlugin.options.isProd){ %><!-- 通过external 加载外部的CDN资源 --><% } %>

六、路由异步+懒加载

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

1. 命令安装

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

2. 图形化安装(推荐使用)

安装开发依赖：

任选其一种即可

3. 配置插件

插件官网：
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
在babel.config.js文件中添加：

{"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

4. 组件引入方式修改

const Foo = () => import('./Foo.vue')const router = new VueRouter({routes: [{ path: '/foo', component: Foo }]
})

5. 把组件按组分块

官网案例：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

展示项目：
接下一篇：Vue优化策略_项目上线_02
https://gblfy.blog.csdn.net/article/details/105369051