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

fanyanjiang

已于 2023-08-30 18:06:35 修改

阅读量608

点赞数 1

文章标签： vue

于 2020-09-18 16:34:15 首次发布

本文链接：https://blog.csdn.net/fanyanjiang/article/details/108667523

版权

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

webpack的外部扩展(externals)可以有效的解决。
webpack之externals官方参考文档，请戳这里→ externals

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

1、在/build/webpack.base.conf.js中，配置externals

module.exports = {
	externals: {
        'vue': 'Vue',
        'vue-router': "VueRouter",
        'axios': 'axios',
        'ViewUI': 'ViewUI',
        'echarts': 'echarts',
    },
}

2、在/src/main.js和/src/router.index.js中，移除上面相关的import引入，改为require引入

//  /src/main.js
import Vue from 'vue';
import axios from 'axios';
import ViewUI from 'view-design';
import echarts from 'echarts';
//改为
var Vue = require('vue');
var axios= require('axios');
var ViewUI = require('view-design');
var echarts = require('echarts');

//   /src/router/index.js 
import Router from 'vue-router';
//改为
var Router = require('vue-router');

3、在/index.html中，通过CND引入相应的js文件和css文件（CDN地址：https://www.bootcdn.cn/） <通过package.json中依赖包的版本查着对应的script和link>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">
    <link rel="shortcut icon" type="image/png" href="./static/title.png" />
    <link href="https://cdn.bootcdn.net/ajax/libs/view-design/4.1.3/styles/iview.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/view-design/4.1.3/iview.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>

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

至此，可以运行你的项目，对比前后差距。

fanyanjiang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
配置webpack中externals来减少打包后vendor.js的体积

在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。webpack的外部扩展(externals)可以有效的解决。webpack之externals官方参考文档，请戳这里→ externals下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、iview、qs等第三方库，那么我
复制链接

扫一扫