使用WebpackAliyunOss提高首页加载速度

框架：Vue + webpack4

这段时间一直在优化web系统的首页加载速度，如果你也遇到了”不管怎么优化、文件体积变得再小，首页加载仍然很慢“，那么请按照下面的步骤检查一下

步骤一

最开始首页要白屏15s+，后面通过webpack的分包+压缩把速度优化到了8s。

分包：optimization（webpack3用webpack.optimize.CommonsChunkPlugin）

压缩：compression-webpack-plugin

这两个大部分人都能实现，而且网上也有很多文章我就不赘述了

步骤二

通过BundleAnalyzerPlugin插件找到大文件再次优化，缩小打包后的文件体积。

 举个栗子，moment优化：

1.换用dayjs;

2.使用插件，加载moment时只下载中文的包：new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)

优化的思路就是实现按需加载，不同插件的按需加载实现方式网上都能找到，不赘述了

 步骤三

检查是否开启了cdn加速

 除cdn外还可以将打包后的文件上传到oss，下面是实现方法

  

   

    

     

    
    

     

      // webpack.prod.js
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const WebpackAliyunOss = 
      require(
      'webpack-aliyun-oss')
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      module.exports = 
      env => ({
     
    
   

    

     

    
    

     

      output: {
     
    
   

    

     

    
    

     
    
      chunkFilename: 
      'static/js/[name].[chunkhash:8].js',
     
    
   

    

     

    
    

     
    
      path: path.resolve(__dirname, 
      '../dist'),
     
    
   

    

     

    
    

     
    
      publicPath: 
      `${oss_config.url}webpack/web/` 
      // publicPath改为对应的oss地址+目录，目录就是下面配置中的dist，这一步千万别忘记！！！否则无法请求到对应的资源
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      plugins: [
     
    
   

    

     

    
    

     
    
      // 上传文件到oss
     
    
   

    

     

    
    

     
    
      new WebpackAliyunOss({
     
    
   

    

     

    
    

     
      
      from: [
      './dist/**'], 
      // 上传哪些文件，支持类似gulp.src的glob方法，如'./build/**', 可以为glob字符串或者数组。
     
    
   

    

     

    
    

     
      
      dist: 
      'webpack/web/', 
      // 上传到oss哪个目录下，默认为oss根目录。
     
    
   

    

     

    
    

     
      
      region: oss_config.region, 
      // 阿里云上传区域
     
    
   

    

     

    
    

     
      
      accessKeyId: oss_config.accessKeyId, 
      // 阿里云的授权accessKeyId
     
    
   

    

     

    
    

     
      
      accessKeySecret: oss_config.accessKeySecret, 
      // 阿里云的授权accessKeySecret
     
    
   

    

     

    
    

     
      
      bucket: oss_config.bucket, 
      // 上传到哪个bucket
     
    
   

    

     

    
    

     
      
      setOssPath: 
      filePath => {
     
    
   

    

     

    
    

     
        
      // some operations to filePath
     
    
   

    

     

    
    

     
        
      let index = filePath.lastIndexOf(
      "dist");
     
    
   

    

     

    
    

     
        
      let Path = filePath.substring(index + 
      4, filePath.length);
     
    
   

    

     

    
    

     
        
      return Path.replace(
      /\\/g, 
      "/");
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          })
     
    
   

    

     

    
    

     

        ]
     
    
   

    

     

    
    

     

      })
     
    
  

 实现以上步骤我的首页加载只需要几百毫秒了，解决了心头大患，吃饭都更香了

希望看了这篇文章也能为你那头秀发做点贡献，咱不贪心，能保一根是一根