当我们完成一个项目想要上线时,需要进行一些优化
代码规范
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’)