优化web项目的几种方法

Post author:xfxia
Post published:2023年10月2日
Post category:其他

项目优化策略

1.生成打包报告

2.第三方库启用CDN

3.Element UI组件按需加载

4.路由懒加载

5.首页内容定制

6.Babel-plugin-transform-removed-console

优化一、通过nprogress添加进度条效果

通过命令安装

在这里插入图片描述

通过ui控制面板安装

进度条添加思路

通过拦截器

当请求拦截器被触发的时候证明发起了请求则打开进度条NProgress.start()

当响应拦截器被处罚的时候证明数据响应回来了则隐藏进度条 NProgress.done()

二、优化在执行build命令间移除所有的console（移除console.log()）

Babel-plugin-transform-remove-console 开发依赖

在这里插入图片描述

打开babel.config.js文件在plugin里面增加 transform-remove-console

三、生成打包报告

四、修改webpack默认配置

在这里插入图片描述

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

两种方式来修改webpack的默认配置

在这里插入图片描述

通过使用chainwebpack自定义打包入口

下图使用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资源减小打包后dist的体积

在这里插入图片描述

在这里插入图片描述

代码放入vue.config.js

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

   // 通过externals加载外币CDN资源 
   // 还需要在index.html配置jss和css 并且删除mian.js下已经引入的样式表
      config.set('externals', {
          vue: 'vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          lodash: '_',
          echarts: 'NProgress',
          'vue-quill-editor': 'VueQuillEditor'
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}