vue element-ui 优化打包 bundle js 大小

本贴最后更新于 1982 天前,其中的信息可能已经事过境迁

背景

最近开发的一个项目使用了 vue+ element-ui 的技术栈,当然,还有其他的一些工具库,比如 axios

说一下我的开发步骤,基础结构是通过 vue-cli@2.x 创建的,手动的加入了 axios vuex , vue-router 是脚手架自带的。

code split

1. 路由懒加载

使用 vue-router 的时候,如果按照默认配置,所有的路由都会被打包到一个 bundle.js 文件中去(bundle 文件名一般是 app.js)。

进入 router/index.js 文件中,只需要将所有类似 import Home from '@/components/home'; 替换为 const Home = () => import('@/components/home')

其余部分不需要变。就能以最简单的形式做到根据路由来划分 webpack 打包的模块。这个时候 执行 npm run build 是就能看到多了很多小的 js 文件, 并且 app.js 文件的体积也减小了。

附上代码示例:

import Vue from 'vue'
import Router from 'vue-router'
const AdminIndex = () => import('@/components/admin-index')
const Home = () => import('@/components/home')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'admin-index',
      component: AdminIndex
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

2. 组件懒加载

跟路由懒加载的形式一样,也是使用 () => import('xxx') 的形式。
如果对于一个容器组件中,import 很多个组件进来,使用组件懒加载,能够继续减小首次加载的文件大小。示例代码:

<template>
  <div>
    <HomeHeader />
    <SearchContainer  />
    <HomeFooter />
  </div>
</template>

<script>
import HomeHeader from "./home-header";
import HomeFooter from "./home-footer";
import SearchContainer from "./containers/search-container";
import LoadingComponent from "@/components/common/loading";

export default {
  name: "home",
  components: {
    HomeHeader,
    HomeFooter,
    SearchContainer,
    LoadingComponent
  }
};
</script>

优化之前:
20181012235553709png
20181013002145418png

组件懒加载优化之后:

<template>
  <div>
    <HomeHeader />
    <SearchContainer  />
    <HomeFooter />
  </div>
</template>

<script>
const HomeHeader = () => import("./home-header");
const HomeFooter = () => import("./home-footer");
const SearchContainer = () => import("./containers/search-container");
export default {
  name: "home",
  components: {
    HomeHeader,
    HomeFooter,
    SearchContainer
  }
};
</script>

20181013002333147png

从文件的个数中,不知道有没有看出什么?

app.js 是属于 项目的公共部分的代码而声明一个 const HomeHeader = () => import("./home-header"); 类似的组件,就会创建一个 n.js 文件,达到了继续拆分比较大的 js 包的目的。

所以其实只要你愿意,可以一部分组件使用 const HomeHeader = () => import("./home-header"); 另一部分组件使用 import HomeHeader from "./home-header";

不过总的来说,除非一个组件过于庞大了,在我开发过程中,才会想着用组件拆分的形式。每一个小组件都这样拆分,最终得到很多很多个小的 js 文件,反而是因为网络请求的原因,拖慢加载速度的。

3. webpack-bundle-analyzer

在做一个项目的一开始,其实我都没有去考虑过性能优化、code split 的事情,只有当逻辑越来越多,开发的时候明显感觉到页面加载速度慢了,network 里看到 bundle.js 体积巨大了,才会想着去做优化的考虑。

emmm 所以到底应该怎么拆?拆哪些部分?这个需要 webpack-bundle-analyzer 来帮忙,code split 也要有理有据。

安装和配置

如果你跟我一样,使用的是 vue-cli@2.9.x 的话,webpack-bundle-analyzer 插件是已经安装了的,webpack 也配置好了的。

反正你就全局搜索一下 webpack-bundle-analyzer 就好了,看看 package.json 中有没有依赖,webpack 配置中有没有,一般只在 webpack.prod.conf.js 中,因为开发环境下也不会去看的。

如果实在没有,那就手动安装和配置好了。

npm i webpack-bundle-analyzer -D

在 build/webpack.prod.config.js 中添加配置:

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

package.jsonscript 中添加:

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

如果你是 window 用户的话,应该是:

“analyz”: “set NODE_ENV=production npm_config_report=true npm run build”

执行: npm run analyz

等项目 build 完了之后,就会自动打开一个页面了,

20181013004902726png

4. element-ui 库的优化

重点终于来了(不是标题党。。。。)。从上面的图中我们可以看到,vendor.xxx.js 实在是有点大,webpack build 完了之后,也细心的为我们标注出了 big:
20181013005117948png

解决办法是对于 element-ui 这个 ui 库从 vendor.xx.js 文件中剥离出来,最简单的办法就是使用 公共的 cdn 了。这里再做一层更彻底的剥离,将 vue, vuex, vue-router,axios 等依赖文件,全部使用 cdn。
20181013005418947png

看好这些依赖的版本,直接去 百度搜索相关的 cdn 文件。下面我直接贴我修改之后的代码:

index.html

...
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

...
<body>
  <div id="app"></div>
  <!-- cdn 加速,减小 vendor.js 体积 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- built files will be auto injected -->
</body>

package.json

上面引入过 cdn 文件的依赖, 全都可以去掉了。

main.js

删除或者注释跟 element 相关的代码:

import ElementUI from 'element-ui';
...
import 'element-ui/lib/theme-chalk/index.css';
...
Vue.use(ElementUI);
...

webpack.base.conf.js

在 webpack 配置中添加外部扩展:

module.exports = {
...
      // 外部扩展,通过 cdn 引入,不会被webpack打包
	  externals: {
	    'vue': 'Vue',
	    'vue-router': 'VueRouter',
	    'vuex': 'Vuex',
	    'axios': 'axios'
	  }
  }

这个时候已经好了,清除一下项目 node_modules 中的删除的不需要的依赖吧, uninstall 也行,直接删除整个 node_modules 文件夹,重新 npm install 也行。

处理完 node_modules 之后, npm start 再次看一下我们优化之后的结果:
20181013010649788png

开发状态下的 app.js 明显已经变小了,build 之后的文件也是。

这里需要注意的一点是,依赖库使用 cdn 文件来加载话,网络请求的速度与 cdn 的速度有关,如果不放心别人的 cdn ,将上述的 cdn 文件内容下载到本地放在 static 目录下当做静态文件即可。

建议使用 CDN 引入依赖的用户在链接地址上锁定版本,以免将来升级时受到非兼容性更新的影响。

vue 项目的 code split ,差不多就是这样了。感谢阅读, Happy Coding !

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 2 关注
  • Element-UI
    2 引用 • 17 回帖
  • codesplit
    1 引用 • 17 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    文章不错,可惜的是外链的图片都挂了。

    1 回复
  • ZhijianZhang
    作者

    啊 我这都是正常的啊

    1 回复
  • 88250

    CSDN 不让外链图片的,你把 Cookie 清空看看。

  • someone

    😂 sorry 之前没有注意这个问题,这次暂时我手动 download 图片下来更新到内容里了,😣 忽略一下水印 💔

  • washmore

    vue-cli@3.0.0 使用路由懒加载会报循环引用(依赖)异常;升级到 3.0.1+ 即可;
    Issue #1669 · vuejs/vue-cli
    https://github.com/vuejs/vue-cli/commit/744c375fba8b2055706f38b524a83fd5ea845686
    或者在 vue.config.js 添加

    chainWebpack: config => {  
        config.plugin('html').tap(args => {  
            args[0].chunksSortMode = 'none'  
            return args  
        })  
    }
    
  • lusizeng

    好文

  • weer0026

    优化思路差不多,我最后还加了脚本打包后直接传上七牛,把几个路由分类成组。

    1 回复
  • ZhijianZhang
    作者

    可以分享出来,学习一下哈哈哈哈

  • 2410655661

    楼主,你的版本号都是怎么锁定的啊

  • wuhuisiyue

    如果不用 cdn,需要把 element-ui 从 vendor 中抽离出来,该怎么修改 webpack.prod.js

    1 回复
  • Blackman99

    我一直觉得这种写法:

    const foo = () => import("/path/to/foo.vue");
    export default {
      components: {
        foo
      }
    };
    

    不是很 DRY,可以直接写成

    export default {
      components: {
        foo
    : () => import("/path/to/foo.vue")
      }
    };
    

    而且如果你的页面组件都在同一个目录并且名字跟路由名称一样的话,路由的配置完全可以写成:

    ['foo', 'bar'].map(p => ({
      name: p,
      path: `/routePrefix-${p}`,
      component: () => import(`/path/to/views/${p}.vue`),
      meta: {
        title: p
      }
    }))
    

    而且我觉得这样才是更加 DRY 的写法

    1 操作
    Blackman99 在 2019-06-25 14:16:21 更新了该回帖
  • Blackman99

    splitChunk

  • 使用最新的 vue-cli 很多问题大佬都封装好了 一些 loader config 都不用了 image.png build 文件夹里面的配置都省略了。相对于低版本的自己安装 ,自己配置 webpack 已经不需要了 ,及其精简的脚手架

  • 至于优化页面我认为主要是 less 或者 sass 热更新占用资源,减少使用 scoped 即可优化

  • image.png 2.0 版本的 cli 对比很明显

请输入回帖内容 ...