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
    评论
1. 元素隐藏的方法有以下几种: - display: none; (隐藏元素并从文档流中移除) - visibility: hidden; (隐藏元素但不从文档流中移除) - opacity: 0; (使元素透明) - height: 0; (将元素高度设为0) - width: 0; (将元素宽度设为0) display:none和visibility:hidden的区别在于,前者会将元素从文档流中移除,导致页面布局重绘,而后者不会影响页面布局,元素的占位仍然存在。 2. 闭包是指函数和函数内部能访问到的变量的集合。闭包形成的原因是因为函数可以作为返回值,被传递到其他函数中执行,此时内层函数可以访问外层函数的变量。闭包的用途包括数据封装、模块化编程、实现私有变量等。 3. 异步轮询机制是指通过定时器不断地发送请求,然后在服务器返回数据后进行处理。这种机制可以用于实时更新数据或者轮询服务器状态等场景。 4. Ajax是异步的,可以在不刷新页面的情况下向服务器发送请求并获取数据。Ajax的流程包括创建XMLHttpRequest对象、配置请求参数、发送请求、接收响应、处理响应数据等步骤。 5. Vue插件的封装一般包括定义插件、安装插件、添加全局方法或属性等。可以使用Vue.use()方法来安装插件。 6. Vue webpack打包优化可以从以下几个方面入手:代码分割、懒加载、压缩代码、使用CDN等。 7. $nextTick()方法可以在当前DOM更新完成后执行回调函数,常用于在更新后操作DOM。例如在更新后获取DOM元素的宽高。 8. Vue项目打包优化可以从以下几个方面入手:代码分割、懒加载、压缩代码、使用CDN等。 9. Vue可以通过transition组件和动画类库来实现动画效果。 10. Vue插槽是一种组件化编程的方式,可以将组件的部分内容暴露给父组件进行自定义。插槽可以分为具名插槽和匿名插槽。具名插槽可以根据插槽名字来进行内容分发,而匿名插槽则是默认插槽。插槽的用途包括组件复用、自定义组件内容等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值