1.生成打包报告 2.使用第三方CDN 3.Element-UI组件按需加载 4.路由懒加载 5.首页内容自定制
设置加载的进度条
nprogress(记得要导入对应的CSS样式) 在请求拦截器中设置Nprogress.start() 在响应拦截器中设置NProgress.done()
警告消息 大部分是eslint语法错误
build编译并压缩生成dist目录,用于生产环境
解决调试console.log的问题 babel-plugin-transfrom-remove-console 在babel.config.js中添加 项目开发与调试阶段这个文件都会运行 //plugins:['transfrom-remove-console'] 这种有问题 const showRemoveConsole=[] if(progress.env.NODE_ENV ==='production'){ showRemoveConsole.push("showRemoveConsole") }
生产报告的方式有两种: 1.命令行 vue-cli-service build --report 2.可视化的UI面版
优化项目的打开速度
在vue.config.js修改webpack的默认配置
vue-cli工具生成的的项目,隐藏了所有的webpack的配置项,如果需要修改webpack默认派配置项 为开发模式与发布模式指定不同的打包入口 vue.config.js导出的配置对象中,新增configureWebpack和chainWebpack节点,来自定义webpack的打包配置 二者作用相同,区别是修改webpack配置的方式不同 chainWebpack通过链式编程的形式,来修改默认的webpack配置 configureWebpack通过操作对象的形式来修改webpack配置 将入口文件修改成两份 main-dev.js 和main-prod.js module.exports = { // lintOnSave: false 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资源 默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件,从而导致打包成功后,单文件体积过大的问题
将import 导入的包在 externals中,webpack中则不会这些包打包到最中的文件之中,而是去window全局查找 在vue.config.j中配置externals module.exports = { // lintOnSave: false chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', // 开发模式 Nprogress: 'NProgress' }) }) config.when(process.env.NODE_ENV === 'development', config => { config.entry('app').clear().add('./src/main-dev.js') }) } }
在public中找到index.html,添加cdn
项目优化 1.路由懒加载 当打包构建项目时,javascript包变得非常大,影响页面加载,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才夹菜对应的组件 (1)安装@babel/plugin-syntax-dynamic-import (2)在babel.config.js配置文件中声明该插件 plugins:['@babel/plugin-syntax-dynamic-import']
项目上线 1.通过node创建web服务器 创建服务器后,然后配置express.static静态目录即可 2.开启gzip配置 gizp压缩技术 npm i compression -D 导入后 然后启用中间件 app.use(compression()) 3.配置https服务 一般是后端来配置 对传输的数据进行加密 4.使用pm2管理应用 npm i pm2 -g 启动项目pm2 start 脚本 --name 自定义名字 重启项目 pm2 restart 自定义名字 停止项目: pm2 stop 自定义名称
