zoukankan      html  css  js  c++  java
  • vue项目首屏加载过久处理笔记

    1、启用gz 配置: 服务器开启gzip

    会生成 gz 文件,现代浏览器基本都支持,会读取gz文件,。
    开启配置:https://blog.csdn.net/baidu_35407267/article/details/77141871

    2、解决依赖项的大小

    npm run build --report 查看依赖内容,分析、优化

    a、moment 过大,使用 date-fns代替
    npm install date-fns --save
    https://blog.csdn.net/fsxxzq521/article/details/85715213
    b、vue核心包 使用运行时版本,vue.runtime.esm.js。节约 将近100k。
    限制在于 只能用render来 运行时 生成,不能使用template 。开发不便。
    https://cn.vuejs.org/v2/guide/installation.html#
    c、zyby-ui组件,过大,有这样一个问题:一些组件依赖了vue,

    ?为什么mintui 导入了 但是没有加载vue呢。
    答:打包时 使用了externals 配置选项
    externals 名叫外部扩展,里面定义的东西 如果跟 import 的 from 同名时 打包时 不会打进去,而是在运行时 再去外部获取。
    注意: externals 里的键名 跟 import from 的内容相同,而键名对应的值 为 真实 外部变量。externals相对于一个中转的作用,打包时 告诉webpack,遇到 from 内容 和 externals 键名相同时,是运行时从外部获取。
    另,如mintui 的配置,如果 用到了按需加载,记得配置时 应按照 babel 转换后的语法去操作。

    正确解决:去掉vue,mintui 用到的组件,互相依赖的自制组件,dependencies
    externals: {
        vue: {
          root: 'Vue',
          commonjs: 'vue',
          commonjs2: 'vue',
          amd: 'vue'
        }
      },
    小插曲:直接写出 vue: 'Vue';结果 外部项目 多依赖了 一个 vue.runtime.esm.js 。

    3、代码内去掉 console

    生产模式下去掉
    new UglifyJsPlugin({
              uglifyOptions: {
                compress: {
                  warnings: false,
                  drop_debugger: true,
                  drop_console: true,
                },
              },
              sourceMap: false,
              parallel: true,
            })     

    4、cdn 有条件上呗

  • 相关阅读:
    MySQL数据库的创建&删除&选择
    JS实现异步的几种方式
    十种排序算法实例说明总结
    常用的bug管理工具
    Bootstrap+Hbuilder
    从菜鸟的视角看测试!
    安装numpy和matplotlib
    Eclipse在线安装svn
    重新打个招呼
    <USACO09JAN>气象测量/气象牛The Baric Bovineの思路
  • 原文地址:https://www.cnblogs.com/fan-zha/p/11014386.html
Copyright © 2011-2022 走看看