vue 项目通过cdn加载库减小bundle体积

最新推荐文章于 2024-05-27 06:20:09 发布

夜跑者

最新推荐文章于 2024-05-27 06:20:09 发布

阅读量370

点赞数

分类专栏：性能优化

本文链接：https://blog.csdn.net/liubangbo/article/details/111054344

版权

性能优化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通常情况下通过vue cli创建的项目，webpack打包的时候会把vue, vuex, vue-router, axios等常用库打包进去，这无疑会使打包后的体积变大。有没有办法不把这些依赖的库文件打包进去？我们可以厉害webpack 的配置项externals 来进行配置，不让把这些库文件打包进去，而是采用cdn方式来加载这些库文件。

先看一下这些库文件打包后的bundle文件大小：

1）vue create xxx

用vue cli 新建一个Vue 工程项目

2）建完后，我们修改一下App.vue文件，不引入组件，把问题简单化。修改后的内容如下：

<template>
  <div id="app">
    <div>hello Vue</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

3）npm run build

编译后，通过du -h dist/js 查看一下编译出的包的大小

568K dist/js 我们看到有568K大小

下面我们通过webpack配置一下externals选项，不把vue库打包进去，再来看看打包后的文件大小：

1）在根目录下新建一个vue.config.js的文件(因为用vue cli3 版本之后新建的工程项目默认是没有vue.config.js配置文件的)

const vueConfig = {
  devServer: {
    port: 9999,
    open: true,
  },
  configureWebpack: {
    externals: {
      vue: "Vue",
    },
  },
  chainWebpack: config => {

  }
};
module.exports = vueConfig;

这是我们自己修改的webpack配置文件，configureWebpack配置项中的externals字段用来配置不从npm 引入库的方式，而是采用从html以script方式引入库。

上面的配置中我们只配置了vue从html 中以script方式引入。

2）在package.json中把vue的依赖删除

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"   //删除
  },

3) 在根目录下的public/index.html文件中引入vue

<!DOCTYPE html>
<html lang="en">
  <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>    
  </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>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

通过script 我们把vue加载了：https://cdn.bootcss.com/vue/2.6.10/vue.js 我们用的是cdn.bootcss.com 这个cdn提供商提供的vue。当然我们也可以用其他家的cnd提供商，例如：

https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js cdn.jsdelivr.net 这家也不错，可以自行百度一下。

如果不在这里加载vue库，运行npm run serve则会报错

Uncaught ReferenceError: Vue is not defined

你import Vue from 'vue'的时候找不到vue了。

4）最后看看不打包vue 的bundle文件大小 du -h dist/js

164K dist/js

只有164K了。

如果我们有多个库需要从cdn中加载则需要在/public/index.html模块中写多个这样的：

有没有办法写成配置的方式？当然有。做法如下：

1）修改vue.config.js 如下：


const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js'    
  ]
}
const vueConfig = {
  publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
  devServer: {
    port: 9999,
    open: true,
  },
  configureWebpack: {
    externals: {
      vue: "Vue",
    },
  },
  chainWebpack: config => {
    //在这里注入cdn配置
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
};
module.exports = vueConfig;

2）修改/public/index.html配置文件如下：

<!DOCTYPE html>
<html lang="en">
  <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>
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.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>
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这样我们就可以在vue.config.js中进行配置cdn要加载的库了，而不用再修改/public/indext.html模板文件了。

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 项目通过cdn加载库减小bundle体积

通常情况下通过vue cli创建的项目，webpack打包的时候会把vue, vuex, vue-router, axios等常用库打包进去，这无疑会使打包后的体积变大。有没有办法不把这些依赖的库文件打包进去？我们可以厉害webpack 的配置项externals 来进行配置，不让把这些库文件打包进去，而是采用cdn方式来加载这些库文件。先看一下这些库文件打包后的bundle文件大小：1）vue create xxx 用vue cli 新建一个Vue 工程项目2）建完后，...
复制链接

扫一扫

专栏目录