解决webpack打包体积过大的问题

最新推荐文章于 2025-03-28 00:35:20 发布

败毒

最新推荐文章于 2025-03-28 00:35:20 发布

阅读量3.1k

点赞数 3

分类专栏： vue.js

本文链接：https://blog.csdn.net/Afra_bd/article/details/100662351

版权

vue.js 专栏收录该内容

1 篇文章

订阅专栏

项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，导致打包后文件体积过大。

1 通过cdn引入第三方库。

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

配置cdn主要利用了externals（外部的）选项，key表示的是包名，即package.json中包的名称，value表示的是包导出的类名。比如说vue包导出的类名是Vue，vue-router导出的类名是VueRouter。类名很重要，不能乱写，不然就会报找不到变量的错。

// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名
module.exports = {
  //...
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'Element',
    'qs': 'Qs'
  }
}

1.2 在/src/main.js和/src/router/index.js中，移除上面与之相关的import引入，改为require方式引入

// /src/main.js
// 移除
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import Qs from 'qs'
Vue.use(ElementUI)

// 添加
const Vue = require('vue')
const ElementUI = require('element-ui')
const axios = require('axios')
const Qs = require('qs')

// /src/router/index.js
// 移除
import Router from 'vue-router'
Vue.use(Router)
// 添加
const Router = require('vue-router')

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>配置webpack中externals来减少打包后vendor.js的体积</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body style="margin: 2px">
    <div id="app">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>
  </body>
</html>

2 使用路由懒加载

像vue这种单页面应用，如果没有懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

简单的说就是：进入首页不用一次加载过多资源造成用时过长

将/router/index.js下的路由配置改为如下

const router = new Router({
    routes: [
         {
               path: '/',
               name: 'HelloWorld',
               component: (resolve) => {
                   require(['../components/HelloWorld'], resolve) // 这里是你的模块 不用import去引入了
               }
           }
    ]
})

或

const HelloWorld = () => import("@/components/HelloWorld");
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})

3 开启gzip压缩

3.1 打开config / index.js 文件

把productionGzip设置为true，

productionGzip: true

3.2 输入命令对插件进行安装

npm install --save-dev compression-webpack-plugin@1.1.12