vue webpack打包优化

最新推荐文章于 2024-05-17 12:28:02 发布

热心网民向某

最新推荐文章于 2024-05-17 12:28:02 发布

阅读量2.1k

点赞数 1

分类专栏：前端vue 文章标签： vue-cli3 webpack vue

本文链接：https://blog.csdn.net/weixin_44929064/article/details/110850651

版权

前端vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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
评论
vue webpack打包优化

1、通过下载webpack可视化插件，可以清晰定位到问题所在下载webpack插件npm install --save-dev webpack-bundle-analyzervue.config.js文件加入配置：const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;configureWebpack: { name: name, plugins: [ n
复制链接

扫一扫