vue cdn 引入第三方依赖

最新推荐文章于 2024-09-16 18:36:59 发布

萝卜砸大坑

最新推荐文章于 2024-09-16 18:36:59 发布

阅读量2.2w

点赞数 1

分类专栏： web 前端文章标签： cdn vue

本文链接：https://blog.csdn.net/weixin_45266125/article/details/105452629

版权

web 前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

博客地址：http://www.globm.top/blog/1/detail/20
通过执行npm run preview – --report来分析webpack打包之后的结果，观察各个静态资源的大小。可以发现占用空间最多的是第三方依赖。如vue、element-ui、 ECharts等。

你可以使用 CDN 外链的方式引入这些第三方库，这样能大大增加构建的速度(通过 CDN 引入的资源不会经 webpack 打包)。如果你的项目没有自己的CDN服务的话，使用一些第三方的CDN服务，如 unpkg 等是一个很好的选择，它提供过了免费的资源加速，同时提供了缓存优化，由于你的第三方资源是在html中通过script引入的，它的缓存更新策略都是你自己手动来控制的，省去了你需要优化缓存策略功夫。

TIP
很多文章说使用 CDN 引入的方式能大大减小代码的体积，这是不可能的。虽然打包完的 bundle小了，但那部分代码只是被你拆出去，用CDN的方式引入罢了。你想减小体积，最高效的方案是启用GZIP。

1.先找到 vue.config.js，添加 externals 让 webpack 不打包 vue 和 element

configureWebpack: {
    externals: {
      vue: 'Vue',
      'element-ui': 'ELEMENT'
    }
  },

2.配置那些第三方资源的CDN，请注意先后顺序,通过 html-webpack-plugin注入到 index.html之中

chainWebpack: config => {
    // cdn
    const cdn = {
      css: [
        // element-ui css
        'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
      ],
      js: [
        // vue must at first!
        'https://unpkg.com/vue/dist/vue.js',
        // element-ui js
        'https://unpkg.com/element-ui/lib/index.js'
      ]
    }
    config.plugin('html')
      .tap(args => {
        args[0].cdn = cdn
        return args
      })

3.public/index.html: 通过你配置的CND Config 依次注入 css 和 js

<head>
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>