文章目录
一、移除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/[email protected]/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 = true
return 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 = false
return 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
