阅读 38

首屏加载优化

首屏加载优化

  1. preload(提高优先级,优先加载本页资源)、prefetch(降低优先级,提前加载可能用到的资源)

  2. 利用LocalStorage缓存资源

  3. 图片资源压缩,icon资源使用雪碧图

对于vue项目:

  1. 分离打包,对于第三方js库的打包优化。
  • 生产环境是内网的话,把资源放内网,通过静态文件引入,如果有外网的话,通过CDN方式引入,不用占用访问外网的带宽,可以节省流量,通过CDN加速。

  • 利用webpack的externals设置外部拓展,使代码编译成通过require运行时加载资源,防止将一些import的第三方资源打包到bundle中。再通过CDN去引入这些资源,可以直接通过全局变量访问,省去import引入和Vue.use注册。

module.exports = {
  ...
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT' // element-ui 变量名要使用 ELEMENT,因为element-ui的 umd 模块名是 ELEMENT
  }
  ...
}
复制代码
  • 代码分离,把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。

通常我们使用 SplitChunksPlugin 去重和分离 chunk。

SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的 entry chunk 中,或者提取到一个新生成的 chunk。

module.exports = {
  //...
  optimization: {
    splitChunks: {
      /** chunks
       * 表示哪些代码需要优化,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为async
       * initial, all模式会将所有来自node_modules的模块分配到一个叫vendors的缓存组;
       * 所有重复引用至少两次的代码,会被分配到default的缓存组。
       * initial模式下会分开优化打包异步和非异步模块,而all会把异步和非异步同时进行优化打包。
       * 也就是说moduleA在indexA中异步引入,indexB中同步引入,initial下moduleA会出现在两个打包块中,而all只会出现一个。
       * **/
      chunks: 'async',
      minSize: 30000, // 表示在压缩前的最小模块大小,默认为30000
      minChunks: 1, // 表示被引用次数,默认为1
      maxAsyncRequests: 5, // 按需加载时候最大的并行请求数,默认为5
      maxInitialRequests: 3, // 一个入口最大的并行请求数,默认为3
      automaticNameDelimiter: '~', // 命名连接符
      name: true, // 拆分出来块的名字,默认由块名和hash值自动生成
      /** 缓存组
       * 缓存组的属性除上面所有属性外,还有test, priority, reuseExistingChunk
          test: 用于控制哪些模块被这个缓存组匹配到
          priority: 缓存组打包的先后优先级
          reuseExistingChunk: 如果当前代码块包含的模块已经有了,就不在产生一个新的代码块
       * 可以通过配置optimization.splitChunks.cacheGroups.default: false禁用default缓存组
      **/
      cacheGroups: {} 
    }
  }
}
// 引自 https://juejin.cn/post/6844903680307625997
复制代码
  1. vue-router使用懒加载,访问到当前页面才会加载相关资源

component: resolve => require(["@/views/version/versionManage.vue"], resolve)

  1. 开启gizp压缩,引入webpack plugin compression-webpack-plugin

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。 html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。 前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。

  1. 引入webpack plugin uglifyjs-webpack-plugin

  2. 引入webpack plugin mini-xss-extract-plugin提取CSS到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件

文章分类
前端
文章标签