VUE项目优化

一、生成打包报告

1. 在vue控制台生成打包报告

    1.1. 点击“任务”=>“build”=>“运行”

    1.2. 运行完毕之后点击右侧“分析”,“控制台”面板查看报告

2. 打包时自动清除console

https://blog.csdn.net/zeroyulong/article/details/97626980

 

二、webpack 配置项

默认情况下,vue-cli 生成的项目,隐藏了webpack 配置项

如果我们需要配置 webpack,需要通过 vue.config.js 来配置 ( 官方配置具体配置参考 https://cli.vuejs.org/zh/guide/webpack.html)

让 打包模式 和 开发模式 2个独立的main.js

  1. 在项目根目录中创建 vue.config.js 文件 

  2. 新建2个main.js,把他复制过去: 

      打包命名为 main-prod.js 

      开发命名为 main-dev.js

  3. 通过 chainWebpack 自定义打包入口 ( chainWebpack可以通过链式编程的形式,修改webpack配置 )

module.exports = {
  // 修改webpack配置,让 打包模式 和 开发模式 2个独立的main.js
  chainWebpack: config => {
    // 打包模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // entry找到默认的打包入口,调用clear则是删除默认的打包入口
      // add添加新的打包入口
      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')
    })
  }
}

 

三、配置打包的项目用第三方 CDN 加载包

1. 通过 externals 加载外部 CDN 资源

  默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。

  为了解决上述问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包,都不会被打包。

2. 在 vue.config.js 中配置

    config.set('externals', {

      // 这里写的是需要全局注册的依赖

      'vue': 'Vue',

      依赖名称: 注册名称,

    })

  3. 删除 main-prod.js 对应的样式导入语句(element-ui 比较特殊,他不需要全局注册,删掉导入即可)

  4. 在 public/index.html 的头部添加对应的 CDN 资源引用

 

四、不同的环境下,首页文件设置不同的配置,我们可以通过配置 isProd 的值的方式进行定制

  1. 在 vue.config.js 中配置 isProd 的值

    ( isProd 值: true 为打包模式 false 为开发模式 )

      打包模式

        config.plugin('html').tap(args => {

          args[0].isProd = true

          return args

        })

      开发模式

        config.plugin('html').tap(args => {

          args[0].isProd = false

          return args

        })

  2. 在 public/index.html 首页中,可以根据 isProd 的值,来决定如何渲染页面结构:

    2.1 按需渲染页面的标题 (开发模式前面添加 'dev -'')

      <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    2.2 按需加载外部的 CDN 资源 (打包模式才渲染出cdn包)

      <% if(htmlWebpackPlugin.options.isProd) { %>

        <!—通过 externals 加载的外部 CDN 资源-->

      <% } %>

 

五、路由懒加载

  当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成

  不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

  1. 安装 @babel/plugin-syntax-dynamic-import 包

  2. 在 babel.config.js 配置文件中声明该插件

  3. 将路由改为按需加载的形式,示例代码如下:

    语法:  const 路由名称 = () => import(/* webpackChunkName: "分组名称" */ '路径'), 分组名称相同的会打包到同一个组件

      const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

      const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

  4. 关于路由懒加载的详细文档,可参考如下链接: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

 

vue.config.js 完整配置

 

module.exports = {
  // 修改webpack配置,让 打包模式 和 开发模式 2个独立的main.js
  chainWebpack: config => {

    // 打包模式
    config.when(process.env.NODE_ENV === 'production', config => {

      // entry找到默认的打包入口,调用clear则是删除默认的打包入口
      // add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')

      // 配置需要使用 CDN 资源加载的第三方依赖包     

     config.set('externals', {
        // 这里写的是需要全局注册的依赖
        'vue': 'Vue',
        依赖名称: 注册名称,
      })

      // 配置 isProd 的值 true 为打包模式
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })

    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {

      config.entry('app').clear().add('./src/main-dev.js')

      // 配置 isProd 的值 false 为开发模式
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
      
    })
  }
}

相关推荐
<p> 课程演示环境:Windows10  </p> <p> 需要学习<span>Ubuntus</span>系统<span>YOLOv4-tiny</span>的同学请前往《<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》 <span></span> </p> <p> <span> </span> </p> <p> <span style="color:#E53333;">YOLOv4-tiny</span><span style="color:#E53333;">来了!速度大幅提升!</span><span></span> </p> <p> <span> </span> </p> <p> <span>YOLOv4-tiny</span>在<span>COCO</span>上的性能可达到:<span>40.2% AP50, 371 FPS (GTX 1080 Ti)</span>。相较于<span>YOLOv3-tiny</span>,<span>AP</span>和<span>FPS</span>的性能有巨大提升。并且,<span>YOLOv4-tiny</span>的权重文件只有<span>23MB</span>,适合在移动端、嵌入式设备、边缘计算设备上部署。<span></span> </p> <p> <span> </span> </p> <p> 本课程将手把手地教大家使用<span>labelImg</span>标注和使用<span>YOLOv4-tiny</span>训练自己的数据集。课程实战分为两个项目:单目标检测(足球目标检测)和多目标检测(足球和梅西同时检测)。<span></span> </p> <p> <span> </span> </p> <p> 本课程的<span>YOLOv4-tiny</span>使用<span>AlexAB/darknet</span>,在<span>Windows10</span>系统上做项目演示。包括:<span>YOLOv4-tiny</span>的网络结构、安装<span>YOLOv4-tiny</span>、标注自己的数据集、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计<span>(mAP</span>计算<span>)</span>和先验框聚类分析。 <span> </span> </p> <p> <span> </span> </p> <p> 除本课程《<span>Windows</span>版<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》外,本人推出了有关<span>YOLOv4</span>目标检测的系列课程。请持续关注该系列的其它视频课程,包括:<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:训练自己的数据集》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:人脸口罩佩戴识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:中国交通标志识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测:原理与源码解析》<span></span> </p> <p> <span> <img alt="" src="https://img-bss.csdnimg.cn/202007061503586145.jpg" /></span> </p> <p> <span><img alt="" src="https://img-bss.csdnimg.cn/202007061504169339.jpg" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页