Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)

本文链接：https://blog.csdn.net/qq_42460461/article/details/117927785

Vue 配置使用 externals 使用cdn减小打包体积

在 vue.config.js 中书写配置

   // 引入webpack
  const webpack = require('webpack');
  const path = require('path');
  const assetsCDN = {
    // 放置需要使用 cdn 的库
    externals:{
        vue: 'Vue',
        'element-plus': 'ElementPlus',
    },
    css:[
      // 存放 引用 css文件的地址
      '//unpkg.com/element-plus@1.0.2-beta.48/lib/theme-chalk/index.css',
    ],
    js:[
      // 存放 引用 js 文件的地址
      '//unpkg.com/vue@3.1.1/dist/vue.global.js',
      '//unpkg.com/element-plus@1.0.2-beta.48/lib/index.full.js'
    ]
  }

module.exports = {
    // 配置代理服务器
    // devServer: {
    //     port: 9010, // 端口号
    //     proxy: {
    //         '/api': {
    //             target: 'http://localhost:3000', // 后台地址
    //             changeOrigin: true, // 允许跨域
    //             pathRewrite: {
    //                 '^/api': ''  // 匹配别名
    //             }
    //         }
    //     },
    //     open: true, // 启动自动打开
    // },
    configureWebpack: config => {
    	// 视为一个外部库，而不将它打包进来。
        config.externals = assetsCDN.externals;

	    // 设置全局变量
	    // config.plugins.push(new webpack.ProvidePlugin({
	    //     '@': path.resolve(__dirname, './src'),
	    // }))
    },
    chainWebpack: config => {
    	// HtmlWebpackPlugin 插件 存储数据 用于生成html模板
        config.plugin('html')
            .tap(args => {
                args[0].cdn = assetsCDN;
                return args
            })
    }
}

在入口文件中书写配置（一般是 public/index.html ）

  <!DOCTYPE html>
<html lang="">

<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">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <!--================循环引入 cdn 中的 css 文件 ================-->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
  <% } %>
  <!--==========================================================-->
</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>
  <!--================ 循环引入 cdn 中的 js 文件 ================-->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!--==========================================================-->
</body>

</html>

vue3 自动配置了全局 API Treeshaking 通过这一更改，如果模块打包工具支持 tree-shake，则 Vue 应用程序中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小。
element-plus 也支持按需引入，建议使用按需引入(我这里测试使用，所以全部引入了)，可以更加减少打包后体积大小。同时也可以使 cdn 引用文件变小，加载速度更快