以cdn链接形式引入外部依赖（三）_前端引入依赖,有2种方式#cdn

作者：盐析白兔 | 2024-02-29 11:58:00

踩

前端引入依赖,有2种方式#cdn

在项目开发过程中，避免不了要使用各种各样的依赖，开发过程觉得没什么的，但是在打包的时候这些依赖体积过大，如下图所示：element-UI打包后占了1.28MB的体积，相当不小了。
在这里插入图片描述
有一种cdn引入方式，可以大大的避免这个问题。

每种依赖，登录它的官网，几乎都能看到这种CDN，在浏览器的输入框输入这个链接，你就明白了。

cdn引入其实一般分为两步：
（1）在index.html中引入css或者js链接

<!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>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


    <!-- 引入组件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
  </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 -->
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(2)引入完之后，你得告诉vue，说上述这些依赖打包的时候不需要打包，需要在vue.config.js中进行配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  chainWebpack: config => {
    if(process.env.analyzer)
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
  configureWebpack: {
    externals: {
      // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
      'vue': 'Vue',
      // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
      // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
      'element-ui': 'ELEMENT',
      'vant':'Vant'
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

externals是用来专门管node_modules中的依赖的，具体可见webpack官网。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/165462?site