通常情况下通过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模块中写多个这样的：
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
有没有办法写成配置的方式？ 当然有。做法如下：
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模板文件了。
原文链接：https://blog.csdn.net/liubangbo/article/details/111054344?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816782246446218%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816782246446218&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-111054344-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6258
