vue项目打包过大，使用cdn优化

最新推荐文章于 2022-08-06 23:35:06 发布

江-月*夜

最新推荐文章于 2022-08-06 23:35:06 发布

阅读量1.4k

点赞数 1

分类专栏： vue 配置文章标签： vue js

本文链接：https://blog.csdn.net/qq_36529240/article/details/110134535

版权

vue 配置专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、在vue.config.js添加，如果没有则新建

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";
// 本地环境是否需要使用cdn
const devNeedCdn = false;
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    vant: "vant",
  },
  // cdn的css链接
  css: ["https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"],
  // cdn的js链接
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js",
    "https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js",
    "https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js",
    "https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js",
  ],
}; 
module.exports = {
  lintOnSave: false,
  configureWebpack: (config) => {
    return {
      // 用cdn方式引入，则构建时要忽略相关资源
      externals: cdn.externals,
      //if (isProduction || devNeedCdn) {config.externals = cdn.externals}
    };
  },
  publicPath: "./",
  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"));
  },
  
};

二、package.json修改
在package.json下修改（用到的cdn链接的，下面删除，注释会报错）

"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"
    // "axios": "^0.19.2",
	// "vant": "^2.5.2",
	// "vue": "^2.6.11",
	// "vue-router": "^3.1.5",
	// "vuex": "^3.1.2"
  },

四、inde.html文件

<html lang="en" style="width: 100%;height: 100%;">
  <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"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->

    <title>CoolDream</title>
  </head>
  <body style="width: 100%;height: 100%;">
    <noscript>
      <strong>We're sorry but blog 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>

五、压缩文件
1.安装

npm i compression-webpack-plugin -S

2.代码

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

六、完整吃vue.config.js代码

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const CompressionPlugin = require("compression-webpack-plugin");
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";

// 本地环境是否需要使用cdn
const devNeedCdn = false;
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    vant: "vant",
  },
  // cdn的css链接
  css: ["https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"],
  // cdn的js链接
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js",
    "https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js",
    "https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js",
    "https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js",
  ],
};
module.exports = {
  lintOnSave: false,
  configureWebpack: (config) => {
    return {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, //匹配文件名
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false, //不删除源文件
          minRatio: 0.8,
        }),
      ],
      // 用cdn方式引入，则构建时要忽略相关资源
      externals: cdn.externals,
      //if (isProduction || devNeedCdn) {config.externals = cdn.externals}
    };
  },
  publicPath: "./",
  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[/\\]/,
  ],
  devServer: {
    port: 8085,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "http://xxx", //API服务器的地址
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
      "/fp": {
        target: "http://xxx", //API服务器的地址
        changeOrigin: true,
        pathRewrite: {
          "^/fp": "",
        },
      },
    },
  },
};

江-月*夜

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue项目打包过大，使用cdn优化

一、在vue.config.js添加，如果没有则新建// 是否为生产环境const isProduction = process.env.NODE_ENV !== "development";// 本地环境是否需要使用cdnconst devNeedCdn = false;const cdn = { // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称） externals: { vue: "Vue", vuex: "Vuex", "vue-r
复制链接

扫一扫