首页 > 技术文章 > vue项目首屏加载过久处理笔记

fan-zha 2019-06-13 09:50 原文

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

推荐阅读