web项目cdn改造

作者: 0说 | 来源:发表于2021-01-08 17:24 被阅读0次

web项目cdn改造
without-cdn
Links&Import
CDN WAF功能开放公测提升网络应用安全性能
Linux云计算学习笔记day48
浅谈CDN、SEO、XSS、CSRF
Vue性能优化
Day 2 Full stack 2021-05-16
Nginx入门到实践之场景实践篇
那么使用CDN对H5游戏有哪些好处？

改造前

改造后

vue.config.js


/
// 标识是不是生产环境
const isProd = process.env.NODE_ENV.indexOf('production') !== -1
let target = {
  target: process.env.VUE_APP_URL,
}
if(!isProd) {
  target.pathRewrite = {
    '^/api': ''
  }
}
console.log(target)
const cdnConfig = require('./config/cdn.js');
module.exports = {
  devServer: {
    proxy: {
      '^/api': target
    }
  },
  chainWebpack: config => {
    // 一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule("svg");

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear();

    // 添加要替换的 loader
    svgRule
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });
    
    config.plugins.delete('preload');
    config.plugins.delete('prefetch')

    const cdnData = {css: [], js: [],};
    //如果现在的服是在列表里的,就是需要min.js的
    //webpack的run server这种开发环境,是期望有调试可看的,所以不引入min
    const getKeyName = isProd && "min" || "default";
    Object.keys(cdnConfig).forEach(key => {
      if (cdnConfig[key].cdn.css[getKeyName]) {
        cdnData.css.push(JSON.stringify(cdnConfig[key].cdn.css[getKeyName]))
      }
      if (cdnConfig[key].cdn.js[getKeyName]) {
        cdnData.js.push(JSON.stringify(cdnConfig[key].cdn.js[getKeyName]))
      }
    });

    console.log(cdnData)
     // 配置cdn引入 挂载到全局下
     config.plugin('html').tap((args) => {
        args[0].cdnData = cdnData;
        console.log(args)
        return args;
    });

    // 开启 bundle 分析
    // config
    // .plugin('webpack-bundle-analyzer')
    // .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

    
    // config.resolve.alias
    // .set('@', resolve('src'))
    // config.module.rules.delete("svg");
    // config.module
    //   .rule('svg-smart')
    //   .test(/\.svg$/)
    //   .include
    //   .add(resolve('src/assets/icons'))
    //   .end()
    //   .use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: '[name]'
    //   })
  },
  configureWebpack: () => {
    // 配置webpack 不打包的依赖
    const externals = {};
    Object.keys(cdnConfig).forEach(key => {
      externals[key] = cdnConfig[key].name
    });
    console.log(externals)
    return {
      externals
    }
  },
}

html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>bitbug_favicon.ico">
    <!-- vue.config.js挂载到全局 这里通过htmlWebpackPlugin.options访问 -->
    <% for(var i in htmlWebpackPlugin.options.cdnData && htmlWebpackPlugin.options.cdnData.css) { %>
      <link rel="stylesheet" href=<%= htmlWebpackPlugin.options.cdnData.css[i] %> >
    <% } %>
    <title>闽电通</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>
    <% for (var i in htmlWebpackPlugin.options.cdnData && htmlWebpackPlugin.options.cdnData.js) { %>
      <script src=<%= htmlWebpackPlugin.options.cdnData.js[i] %>></script>
    <% } %>
    <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>js/aliyun-oss-sdk-5.3.1.min.js"></script>
    <script type="text/javascript" src="<%= BASE_URL %>js/aliyun-upload-sdk-1.5.0.min.js"></script>
    
    <!-- built files will be auto injected -->
  </body>
</html>