通常情况下通过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模板文件了。