vue 项目打包优化

每当我们写完一个项目，要线上的话 都要对进行一些优化

代码规范

1：一般我们开发一个项目都要遵循一个代码规范，以便后期交流方便
这时候我们使用 vue里面的 eslint 就是一个不错的选择，

移除项目打包中的consol

2：我们再开发完一个项目之后 有许多的consolo，这些多多少少都会占用空间
1. babel-plugin-transform-remove-console 方法**

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

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if(process.env.NODE_ENV === ‘production’){
prodPlugins.push(‘transform-remove-console’)
}
module.exports = {
‘presets’: [
‘@vue/cli-plugin-babel/preset’
],
‘plugins’: [
[
‘component’,
{
‘libraryName’: ‘element-ui’,
‘styleLibraryName’: ‘theme-chalk’
}
],
// 发布产品时的插件数据
// …表示展开运算符 把数组中的每一项展开放在另一个数组中
…prodPlugins
]
}

开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式 与发布模式 ，共用同一个打包的入口文件（即 src/main.js） 。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

① 开发模式的入口文件为 src/main-dev.js
② 发布模式的入口文件为 src/main-prod.js
介绍configureWebpack 和 chainWebpack

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

在这里， configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同：

① chainWebpack 通过 链式编程的形式，来修改默认的 webpack 配置
② configureWebpack 通过 操作对象的形式，来修改默认的 webpack 配置

实现路由懒加载
安装包

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

将路由改为按需加载的形式，示例代码如下：

const Foo = () => import(/* webpackChunkName: “group-foo” / ‘./Foo.vue’)
const Bar = () => import(/ webpackChunkName: “group-foo” / ‘./Bar.vue’)
const Baz = () => import(/ webpackChunkName: “group-boo” */ ‘./Baz.vue’)