项目中引用了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

 

 

最后 run build吧

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue