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

标签：vue,键名,gz,externals,首屏,mintui,过久,组件
来源： https://www.cnblogs.com/fan-zha/p/11014386.html