以cdn链接形式引入外部依赖（三）

最新推荐文章于 2024-03-25 11:29:55 发布

Realistic-er

最新推荐文章于 2024-03-25 11:29:55 发布

阅读量1.9k

点赞数 1

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/m0_52518047/article/details/124862241

版权

在项目开发过程中，避免不了要使用各种各样的依赖，开发过程觉得没什么的，但是在打包的时候这些依赖体积过大，如下图所示：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>

(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'
    }
  }
})

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

Realistic-er

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
以cdn链接形式引入外部依赖（三）

在项目开发过程中，避免不了要使用各种各样的依赖，开发过程觉得没什么的，但是在打包的时候这些依赖体积过大，如下图所示：element-UI打包后占了1.28MB的体积，相当不小了。有一种cdn引入方式，可以大大的避免这个问题。每种依赖，登录它的官网，几乎都能看到这种CDN，在浏览器的输入框输入这个链接，你就明白了。cdn引入其实一般分为两步：（1）在index.html中引入css或者js链接<!DOCTYPE html><html lang=""> <hea
复制链接

扫一扫