vue webpack打包优化

1、通过下载webpack可视化插件,可以清晰定位到问题所在

下载webpack插件
npm install --save-dev webpack-bundle-analyzer

vue.config.js文件加入配置:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
configureWebpack: {
    name: name,
    plugins: [
      new BundleAnalyzerPlugin()
    ],
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
}

此时执行打包命令后浏览器会弹出可视化界面
在这里插入图片描述

2、chunk-libs文件是项目所引用的3方库,都打包进这个文件了,现在优化这个文件

这里用到了cdn,cdn方式引入外部的js库,链接:https://www.bootcdn.cn/

  // 在vue.config.js里面配置忽略打包文件
  chainWebpack(config) {
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts',
      'XLSX': 'XLSX'
    })
  }

然后在根目录public/index.html文件中引入相应的js库(库的版本需要跟package.json文件中保持一致)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= webpackConfig.name %></title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.4.0/echarts-en.min.js" rel="stylesheet" type="text/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.15.6/xlsx.full.min.js" rel="stylesheet" type="text/javascript"></script>
</head>

<body>
  <noscript>
    <strong></strong>
  </noscript>
  <div id="app"></div>
</body>

</html>

再次执行打包脚本npm run build后会发现chunk-libs文件体积小了很多

3、路由懒加载,组件懒加载

vue开发,单页面应用,即一个组件就是一个模块,可以互相引入;

// import引入组件,打包后,会将路由配置里面的所有component打包到一个js文件中,导致部署后,跳转时加载的文件太大,加载缓慢
import XXX form './XXX.vue'
// 懒加载方式引入,打包后,每个组件都是单独的文件,可实现按需加载,提高性能
const Foo = () => import('./Foo.vue')

官方文档中案例(链接:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html):
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):

import('./Foo.vue') // 返回 Promise

结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变,只需要像往常一样使用 Foo:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

下面看看未优化前打包体积:
在这里插入图片描述
下面是优化后的体积:
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值