配置webpack中externals来减少打包后vendor.js的体积

最新推荐文章于 2025-04-23 10:46:11 发布

周八营业的阿一

最新推荐文章于 2025-04-23 10:46:11 发布

阅读量1k

点赞数 1

文章标签： javascript vue.js npm

本文链接：https://blog.youkuaiyun.com/qq_37214137/article/details/123430372

版权

背景

在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。

webpack的外部扩展(externals)可以有效的解决。官方文档指路

下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、vuex等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除依赖。

在vue.config.js中，配置externals

// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名
const assetsCDN = {
  // 移除已从cdn引入的组件，不打包以下命名的内容
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'element-ui': 'ELEMENT',
    'axios': 'axios',
  },
};
	
module.exports = {
	...
  configureWebpack: { // 判断是否是开发还是生产,根据环境不同设置externals
    externals: process.env.NODE_ENV === 'production' ? assetsCDN.externals : {},
  },
  ...
}

index.html中通过CDN引入相应的js文件和css文件(CDN地址：https://www.bootcdn.cn)

<!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') { %>用来判断是生产环境 -->
    <!-- Vue引入一定要放在第一个 -->
    <% 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>