背景
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。
webpack的外部扩展(externals)可以有效的解决。官方文档指路
下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、vuex等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除依赖。
在vue.config.js中，配置externals
const assetsCDN = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
},
};
module.exports = {
...
configureWebpack: {
externals: process.env.NODE_ENV === 'production' ? assetsCDN.externals : {},
},
...
}
<!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>ele-admin-huy-mall</title>
</head>
<body>
<div id="app"></div>
<% if(process.env.NODE_ENV === 'production') { %>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.15.1/index.js"></script>
<% } %>
</body>
</html>
|