zoukankan      html  css  js  c++  java
  • vue-cli4 项目打包优化

    1.通过命令行参数的形式生成报告:

    // 通过vue-cli 的命令选项可以生成打包报告
    // --report 选项可以生成report.html 以帮助分析包的内容
    vue-cli-service build --report
    

    2.路由懒加载
    当打包构建项目时,JavaScript包会变得非常大,影响页面加载,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
    方法:

    • 安装 @babel/plugin-syntax-dynamic-import 包
    • 在 babel.config.js 配置文件中声明该插件
    • 将路由改为按需加载的形式,代码如下:
    // 只有安装了插件才能用如下语法
    const Foo = ()=> import(/* webpackChunkName:"group-foo" */ './Foo.vue')
    const Bar = ()=> import(/* webpackChunkName:"group-foo" */ './Bar.vue')
    const Boo = ()=> import(/* webpackChunkName:"group-boo" */ './Baz.vue')
    

    关于懒加载更详细的文档可参考:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

  • 相关阅读:
    day 66
    day 66 作业
    day 65 作业
    day 55 Ajax
    day 56 forms组件
    day 59
    day 58 cookie与session 中间件
    day 54
    day 53
    day 52
  • 原文地址:https://www.cnblogs.com/liea/p/11853748.html
Copyright © 2011-2022 走看看