vue 项目首页加载过慢 项目体积打包过大 使用cdn优化

前言

由于项目打包后体积过大， 还有就是项目中首页加载过慢， 过慢的原因就是js,css 静态资源第一次加载的时间长
我的vue脚手架版本是@vue/cli 4.3.1 我发现在public下的html页面直接引入不好使通过查资料，以及网上大佬才得知 新版脚手架用下面方式部署cdn (方法不是唯一的)

1.在vue.config.js中 没有的话和mian.js同级下创建一下
const path = require('path')
const webpack = require('webpack')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const CompressionPlugin = require('compression-webpack-plugin')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用cdn
const devNeedCdn = true
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    vant: 'vant',
    moment: 'moment',
    JsBarcode: 'jsbarcode',
    VueLazyLoad: 'vue-lazyload',
    ElementUI: 'element-ui'
  },
  // cdn的css链接
  css: ['https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vant@2.9.4/index.css',
    'https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css'
  ],
  // cdn的js链接
  js: [
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue@2.6.11/vue.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vuex@3.4.0/vuex.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue-router@3.2.0/vue-router.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vant@2.9.4/vant.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/axios@0.19.2/axios.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/moment.js/2.29.0/moment.min.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/jsbarcode/3.11.3/JsBarcode.all.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue-lazyload/1.3.3/vue-lazyload.js',
    'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/element-ui@2.14.1/lib/index.js'
  ]
}
module.exports = {
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  lintOnSave: false,
  configureWebpack: (config) => {
    return {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          // deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8,
          algorithm: 'gzip'
        }),
        // 规定js文件的个数
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 5,
          minChunkSize: 100
        })
      ],
      // 用cdn方式引入，则构建时要忽略相关资源
      externals: cdn.externals
      // if (isProduction || devNeedCdn) {config.externals = cdn.externals}
    }
  },
  publicPath: './', // 本地环境使用
  // publicPath: 'https://awepos-static-file.oss-accelerate.aliyuncs.com/mb',  // 线上环境使用 静态文件 js css 部署的服务器
  chainWebpack: (config) => {
    // ============注入cdn start============
    config.plugin('html').tap((args) => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })
    // ============注入cdn start============
    // 修改文件引入自定义路径
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_api', resolve('src/api'))
  },
  transpileDependencies: [
    /[/\\]node_modules[/\\]test[/\\]/,
    /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
  ]
}
2.在package.json修改
"dependencies": {
    "compression-webpack-plugin": "^3.1.0",
    "core-js": "^3.6.4",
    "exif-js": "^2.3.0",
    "lib-flexible": "^0.3.2",
    "postcss-plugin-px2rem": "^0.8.1",
    "qs": "^6.9.1"
    // cdn 引用的就不要在这里出现了  ！！！
    // "axios": "^0.19.2",  （要删除掉 不要注释掉 要不会报错哦）
    // "vant": "^2.5.2",（要删除掉 不要注释掉 要不会报错哦）
    // "vue": "^2.6.11",（要删除掉 不要注释掉 要不会报错哦）
    // "vue-router": "^3.1.5",（要删除掉 不要注释掉 要不会报错哦）
    //"vuex": "^3.1.2"（要删除掉 不要注释掉 要不会报错哦）
  },
3.public下的index.html文件中
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 解决版本更新缓存问题 -->
  <meta http-equiv="pragram" content="no-cache">
  <meta http-equiv="cache-control" content="no-store, must-revalidate">
  <meta http-equiv="expires" content="0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="icon" href="">
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
        href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
        rel="stylesheet"
/>
<% } %>
<!-- 使用CDN的CSS文件 -->
  <title id="titleHeader"></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app">
  </div>
  <!-- built files will be auto injected -->
  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->
</body>

</html>
4.压缩文件

（1）安装插件 (这一步也很重要哦)
cnpm i --save compression-webpack-plugin
（2）在vue.config.js 中使用
具体的使用方法已经在第一部分写好了 我这是单独抽出来给你们演示一下

const CompressionPlugin = require("compression-webpack-plugin");
configureWebpack: (config) => {
    return {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, //匹配文件名
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false, //不删除源文件
          minRatio: 0.8,
        }),
      ],
    };
  },

代码有点多 但是实现起来的效果还是不错的 大家可以试一下啊

原文：(https://blog.csdn.net/qq_36529240/article/details/110134535)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容