使用WebpackAliyunOss提高首页加载速度

最新推荐文章于 2024-07-09 18:51:45 发布

superYe7

最新推荐文章于 2024-07-09 18:51:45 发布

阅读量796

点赞数

分类专栏： webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/superYe7/article/details/116263928

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

框架：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, "/");
      }
    })
  ]
})

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

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