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 有条件上呗

  • 相关阅读:
    C# 以GZip解压缩
    C# 获取时间戳(支持毫秒)
    C#中 DateTime 转 DateTimeOffset
    C# WPF中 SecureString 转 String
    C# 根据文件头判断文件类型
    C#中 MD5 32位加密
    C#中 Stream转为byte[]
    C#中byte[]转BitmapImage
    sql按天分组
    eclispe报错PermGen space
  • 原文地址:https://www.cnblogs.com/fan-zha/p/11014386.html
Copyright © 2011-2022 走看看