vue项目打包优化

当我们完成一个项目想要上线时，需要进行一些优化

代码规范

1.我们在写项目时，要遵循一个规范，方便与其他人交流
这时候我们可以使用 vue里面的 eslint

去除console

2.我们在项目开发时多多少少会留下一下console，这也会占用一些空间
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） 。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

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

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

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

1） chainWebpack 通过 链式编程的形式，来修改默认的 webpack 配置
2） 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’)