vue-cli3 资源CDN优化加载

背景

背景就是项目打包chunk-vendors依赖文件太大，导致初次加载很慢… 所以就用到了 CDN 优化加载。

配置

对于 vue，vuex，vue-router，axios，iview 等我们可以利用 webpack 的 externals 参数来配置，这里我们设定只需要在生产环境中才需要使用。

第一步：首先找 CDN 托管路径(公司有 oss 存储服务器的忽略)

https://www.bootcdn.cn/ bootstrap 的 cdn 托管服务

https://unpkg.com/ 包管理工具的 cdn 资源

第二步

vue.config.js

//判断是否为生产环境
const isProduction = process.env.NODE_ENV === "production";

//定义 CDN 路径
const cdn = {
  css: [],
  js: [
    "https://cdn.bootcss.com/vue/2.5.10/vue.min.js",
    "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
    "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js",
    "https://cdn.bootcss.com/axios/0.18.0/axios.min.js",
    "http://img-hub.opechk.com/invoice/87SP000000023/iview.min.js" //此处是公司提供的阿里云的cdn
  ]
};

module.exports = {
  configureWebpack: smp.wrap({
    //生产环境注入 cdn
    externals:
      (isProduction && {
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        axios: "axios",
        "view-design": "iview"
      }) ||
      {}
  }),
  chainWebpack: config => {
    // 生产环境配置
    if (isProduction) {
      // 生产环境注入 cdn
      config.plugin("html").tap(args => {
        args[0].cdn = cdn;
        return args;
      });
    }
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("_c", resolve("src/components"));
    config.resolve.symlinks(true);
  }
};

第三步

index.html配置

<!DOCTYPE html>
<html>
  <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 %>favicon.ico" />
    <!-- 使用 CDN 的 CSS 文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
    <title></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but iview-admin 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>
    <% } %>
  </body>
</html>

nginx 配置本地预览效果

server {
        listen       9007;//端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location ^~ /store/ { //如果资源为根目录的请用/
            # autoindex off;
            try_files $uri $uri/ /store/;
            alias  F:\\www\\hub-frontend\\dist\\;//打包资源本地路径
            index index.html;
        }
        location /opec-store-api/ {//接口转发
            rewrite ^/opec-store-api/(.*)$ /opec-store-api/$1 break;  #所有对后端的请求加一个api前缀方便区分，真正访问的时候移除这个前缀
            # API Server
            proxy_pass http://test.test.test.test/;//需要转发的地址

            #将真正的请求代理到serverB,即真实的服务器地址，ajax的url为/api/user/1的请求将会访问http://www.serverB.com/user/1
        }

}

eee

Node.js 静态文件服务器

https://github.com/zeit/serve

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

背景

配置

nginx 配置 本地预览效果

Node.js 静态文件服务器

nginx 配置本地预览效果